摘要：如果拖動(dòng)元素經(jīng)過不允許放置的元素，無(wú)論用戶如何操作，都不會(huì)觸發(fā)事件。讓其他元素可以拖放也是可能的。為所有元素規(guī)定了一個(gè)屬性，表示元素是否可以拖動(dòng)。通過設(shè)置這個(gè)屬性可以使其他元素可拖動(dòng)相關(guān)實(shí)例垃圾桶參考資料高級(jí)程序設(shè)計(jì)拖拽與拖放簡(jiǎn)介

拖動(dòng)某元素時(shí)，會(huì)在被拖動(dòng)元素上以此觸發(fā)下列事件：

dragstart:當(dāng)拖拽元素開始被拖拽的時(shí)候觸發(fā)的事件

drag:當(dāng)拖拽元素的過程中一直觸發(fā)的事件

dragend：當(dāng)拖拽完成后觸發(fā)的事件

當(dāng)某個(gè)元素被拖放到一個(gè)有效的放置目標(biāo)上時(shí)，放置目標(biāo)上回依次觸發(fā)下列事件：

dragenter:當(dāng)拖曳元素進(jìn)入目標(biāo)元素的時(shí)候觸發(fā)的事件

dragover:拖拽元素在目標(biāo)元素上移動(dòng)的時(shí)候觸發(fā)的事件

dragleave:當(dāng)拖曳元素離開目標(biāo)元素的時(shí)候觸發(fā)的事件

drop:被拖拽的元素在目標(biāo)元素上同時(shí)鼠標(biāo)放開觸發(fā)的事件

在拖放元素經(jīng)過某些無(wú)效放置目標(biāo)時(shí)，可以看到一種特殊的光標(biāo)(圓環(huán)中有一條反斜線)，表示不能放置。雖然所有元素都支持放置目標(biāo)事件，但這些元素默認(rèn)是不允許放置的。如果拖動(dòng)元素經(jīng)過不允許放置的元素，無(wú)論用戶如何操作，都不會(huì)觸發(fā)drop事件。不過，你可以把任何元素變成有效的放置目標(biāo)，方法是：重寫dragenter和dragover事件的默認(rèn)行為。

例如，假如一個(gè)ID為“droptarget”的div元素，可以用如下代碼將它變成一個(gè)放置目標(biāo)

var droptarget = document.getElementById("droptarget")
droptarget.addEventListener("dragover", function(event){
    event.preventDefault()
}
droptarget.addEventListener("dragenter", function(event){
    event.preventDefault()
}

dataTransfer對(duì)象，它是事件對(duì)象的一個(gè)屬性，用于從被拖放元素向放置目標(biāo)傳遞字符串格式的數(shù)據(jù)。

detaTransfer對(duì)象有兩個(gè)主要方法：getData()和setData()。setData()方法的第一個(gè)參數(shù)，也是getData()方法的唯一的一個(gè)參數(shù)，是一個(gè)字符串，表示保存的數(shù)據(jù)類型，取值為“text”和“URL”

event.dataTransfer.setData("text", "some text");
var text = event.dataTransfer.getData("text");

注意：保存在dataTransfer對(duì)象中的數(shù)據(jù)只能在drop事件處理程序中讀取。

默認(rèn)情況下，只有圖像、鏈接、文本是可以拖動(dòng)的。讓其他元素可以拖放也是可能的。HTML5為所有HTML元素規(guī)定了一個(gè)draggable屬性，表示元素是否可以拖動(dòng)。圖像和鏈接的draggable屬性自動(dòng)設(shè)置成了true，而其他元素這個(gè)屬性的默認(rèn)值都是false。通過設(shè)置這個(gè)屬性可以使其他元素可拖動(dòng)

...

  
垃
圾
桶


  
item 1
  
item 2
  
item 3
  
item 4
  
item 5

var dustbin = document.querySelector(".dustbin");
var draglist = document.getElementsByClassName("drag-item");
var remind = document.querySelector(".dragremind");
var dragElem = null;

for(var i=0;i
參考資料
《JavaScript高級(jí)程序設(shè)計(jì)》
HTML5 drag & drop 拖拽與拖放簡(jiǎn)介