請(qǐng)把 W3School 圖片拖到矩形中。

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

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

拖放是 HTML5 標(biāo)準(zhǔn)的組成部分：任何元素都是可拖放的。

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

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

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

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

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

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

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

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

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

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

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

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

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

如何在兩個(gè) <div> 元素之間來回拖放圖像：

請(qǐng)把 W3School 圖片拖到矩形中。