HTML5拖放（Drag 和 Drop）
拖放（Drag 和 drop）是 HTML5 標(biāo)準(zhǔn)的組成部分肴楷。
拖放
拖放是一種常見的特性婶芭，即抓取對象以后拖到另一個位置贪磺。
在 HTML5 中赋朦，拖放是標(biāo)準(zhǔn)的一部分拧略，任何元素都能夠拖放芦岂。
瀏覽器支持：
Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持拖動。
注意:Safari 5.1.2不支持拖動垫蛆。
設(shè)置元素為可拖放
首先禽最，為了使元素可拖動，把 draggable 屬性設(shè)置為 true ：
如：<img ?draggable="true">
拖動什么 - ondragstart 和 setData()
然后袱饭，規(guī)定當(dāng)元素被拖動時川无，會發(fā)生什么。
在上面的例子中虑乖，ondragstart 屬性調(diào)用了一個函數(shù)懦趋，drag(event)，它規(guī)定了被拖動的數(shù)據(jù)疹味。
dataTransfer.setData() 方法設(shè)置被拖數(shù)據(jù)的數(shù)據(jù)類型和值：
function drag(ev){
? ? ? ?ev.dataTransfer.setData("Text",ev.target.id);
}
放到何處 - ondragover
ondragover 事件規(guī)定在何處放置被拖動的數(shù)據(jù)仅叫。
默認(rèn)地，無法將數(shù)據(jù)/元素放置到其他元素中糙捺。如果需要設(shè)置允許放置诫咱，我們必須阻止對元素的默認(rèn)處理方式。
這要通過調(diào)用 ondragover 事件的 event.preventDefault() 方法：
event.preventDefault();
進(jìn)行放置 - ondrop
當(dāng)放置被拖數(shù)據(jù)時洪灯，會發(fā)生 drop 事件坎缭。
在上面的例子中，ondrop 屬性調(diào)用了一個函數(shù)，drop(event)：
function drop(ev){
? ? ? ev.preventDefault();
? ? ? var data=ev.dataTransfer.getData("Text");
? ? ? ev.target.appendChild(document.getElementById(data));
}
代碼解釋：
調(diào)用 preventDefault() 來避免瀏覽器對數(shù)據(jù)的默認(rèn)處理（drop 事件的默認(rèn)行為是以鏈接形式打開）
通過 dataTransfer.getData("Text") 方法獲得被拖的數(shù)據(jù)幻锁。該方法將返回在 setData() 方法中設(shè)置為相同類型的任何數(shù)據(jù)凯亮。
被拖數(shù)據(jù)是被拖元素的 id ("drag1")
把被拖元素追加到放置元素（目標(biāo)元素）中
拖放的相關(guān)事件：
ondrag 該事件在元素正在拖動時觸發(fā)
ondragstart 該事件在用戶開始拖動元素時觸發(fā)
ondragenter 該事件在拖動的元素進(jìn)入放置目標(biāo)時觸發(fā)
ondragover 該事件在拖動元素在放置目標(biāo)上時觸發(fā)
ondragleave 該事件在拖動元素離開放置目標(biāo)時觸發(fā)
ondragend 該事件在用戶完成元素的拖動時觸發(fā)
ondrop 該事件在拖動元素放置在目標(biāo)區(qū)域時觸發(fā)
拖放的相關(guān)屬性：
draggable ?———》 ?設(shè)置元素為可拖放 true/false
