請把 W3School 圖片拖到矩形中。

成都創(chuàng)新互聯(lián)公司是一家朝氣蓬勃的網(wǎng)站建設(shè)公司。公司專注于為企業(yè)提供信息化建設(shè)解決方案。從事網(wǎng)站開發(fā)，網(wǎng)站制作，網(wǎng)站設(shè)計，網(wǎng)站模板，微信公眾號開發(fā)，軟件開發(fā)，微信小程序，10余年建站對成都混凝土攪拌機等多個行業(yè)，擁有多年建站經(jīng)驗。

拖放（Drag 和 Drop）是很常見的特性。它指的是您抓取某物并拖入不同的位置。

拖放是 HTML5 標準的組成部分：任何元素都是可拖放的。

表格中的數(shù)字指示了完全支持拖放的首個瀏覽器版本。

下列是關(guān)于拖放的簡單例子：

它也許看上去有點復雜，不過讓我們研究一下拖放事件的所有不同部分。

首先：為了把一個元素設(shè)置為可拖放，請把 draggable 屬性設(shè)置為 true：

然后，規(guī)定當元素被拖動時發(fā)生的事情。

在上面的例子中，ondragstart 屬性調(diào)用了一個 drag(event) 函數(shù)，規(guī)定拖動什么數(shù)據(jù)。

dataTransfer.setData() 方法設(shè)置被拖動數(shù)據(jù)的數(shù)據(jù)類型和值：

在本例中，數(shù)據(jù)類型是 "text"，而值是這個可拖動元素的 id ("drag1")。

ondragover 事件規(guī)定被拖動的數(shù)據(jù)能夠被放置到何處。

默認地，數(shù)據(jù)/元素無法被放置到其他元素中。為了實現(xiàn)拖放，我們必須阻止元素的這種默認的處理方式。

這個任務由 ondragover 事件的 event.preventDefault() 方法完成：

當放開被拖數(shù)據(jù)時，會發(fā)生 drop 事件。

在上面的例子中，ondrop 屬性調(diào)用了一個函數(shù)，drop(event)：

如何在兩個

元素之間來回拖放圖像：

 

請把 W3School 圖片拖到矩形中。