摘要：如果拖動元素經過不允許放置的元素，無論用戶如何操作，都不會觸發事件。讓其他元素可以拖放也是可能的。為所有元素規定了一個屬性，表示元素是否可以拖動。通過設置這個屬性可以使其他元素可拖動相關實例垃圾桶參考資料高級程序設計拖拽與拖放簡介

拖動某元素時，會在被拖動元素上以此觸發下列事件：

dragstart:當拖拽元素開始被拖拽的時候觸發的事件

drag:當拖拽元素的過程中一直觸發的事件

dragend：當拖拽完成后觸發的事件

當某個元素被拖放到一個有效的放置目標上時，放置目標上回依次觸發下列事件：

dragenter:當拖曳元素進入目標元素的時候觸發的事件

dragover:拖拽元素在目標元素上移動的時候觸發的事件

dragleave:當拖曳元素離開目標元素的時候觸發的事件

drop:被拖拽的元素在目標元素上同時鼠標放開觸發的事件

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

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

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

dataTransfer對象，它是事件對象的一個屬性，用于從被拖放元素向放置目標傳遞字符串格式的數據。

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

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

注意：保存在dataTransfer對象中的數據只能在drop事件處理程序中讀取。

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

...

  
垃
圾
桶


  
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高級程序設計》
HTML5 drag & drop 拖拽與拖放簡介