摘錄一些 比較重要的物件和事件以及屬性

* 首先，要使元素能否能被拖拽，必須設定 draggable  = "true"  例如：<div  draggable =“true”>只有設定draggable才可以被拖拽</div>

* 一個很很重要的介面 DataTransfer，它是拖拽物件用來傳遞的媒介，它包含以下屬性和方法

• dataTransfer.dropEffect [ = value ]：返回已選擇的拖放效果，如果該操作效果與起初設定的effectAllowed效果不符，則拖拽操作失敗。可以設定修改，包含這幾個值：“none”, “copy”, “link” 和 “move”
  。
• dataTransfer.effectAllowed [ = value ]：返回允許執行的拖拽操作效果，可以設定修改，包含這些值：“none”, “copy”, “copyLink”, “copyMove”, “link”, “linkMove”, “move”, “all” 和 “uninitialized”
• dataTransfer.types：返回在dragstart事件出發時為元素儲存資料的格式，如果是外部檔案的拖拽，則返回”files”
• dataTransfer.clearData ( [ format ] )：刪除指定格式的資料，如果未指定格式，則刪除當前元素的所有攜帶資料
• dataTransfer.setData(format, data)：為元素新增指定資料
• dataTransfer.getData(format)：返回指定資料，如果資料不存在，則返回空字串
• dataTransfer.files：如果是拖拽檔案，則返回正在拖拽的檔案列表FileList
• dataTransfer.setDragImage(element, x, y)：制定拖拽元素時跟隨滑鼠移動的圖片，x、y分別是相對於滑鼠的座標(據測試，Chrome暫不支援)
• dataTransfer.addElement(element)：新增一起跟隨拖拽的元素，如果你想讓某個元素跟隨被拖拽元素一同被拖拽，則使用此方法(據測試，Chrome暫不支援)

Drag & Drop 包括以下事件：

• dragstart：要被拖拽的元素開始拖拽時觸發，這個事件物件是被拖拽元素
• dragenter：拖拽元素進入目標元素時觸發，這個事件物件是目標元素
• dragover：拖拽某元素在目標元素上移動時觸發，這個事件物件是目標元素
• dragleave：拖拽某元素離開目標元素時觸發，這個事件物件是目標元素
• dragend：在drop之後觸發，就是拖拽完畢時觸發，這個事件物件是被拖拽元素
• drop：將被拖拽元素放在目標元素內時觸發，這個事件物件是目標元素

注意：在ondragover中一定要執行preventDefault()，否則ondrop事件不會被觸發。另外，如果是從其他應用軟體或是檔案中拖東西進來，尤其是圖片的時候，預設的動作是顯示這個圖片或是相關資訊，並不是真的執行drop。此時需要用用document的ondragover事件把它直接幹掉。

DataTransfer 物件：退拽物件用來傳遞的媒介，使用一般為Event.dataTransfer。
draggable 屬性：就是標籤元素要設定draggable=true，否則不會有效果，例如：
<div title="拖拽我" draggable="true">列表1</div>
ondragstart 事件：當拖拽元素開始被拖拽的時候觸發的事件，此事件作用在被拖曳元素上
ondragenter 事件：當拖曳元素進入目標元素的時候觸發的事件，此事件作用在目標元素上
ondragover 事件：拖拽元素在目標元素上移動的時候觸發的事件，此事件作用在目標元素上
ondrop 事件：被拖拽的元素在目標元素上同時滑鼠放開觸發的事件，此事件作用在目標元素上
ondragend 事件：當拖拽完成後觸發的事件，此事件作用在被拖曳元素上
Event.preventDefault() 方法：阻止預設的些事件方法等執行。在ondragover中一定要執行preventDefault()，否則ondrop事件不會被觸發。另外，如果是從其他應用軟體或是檔案中拖東西進來，尤其是圖片的時候，預設的動作是顯示這個圖片或是相關資訊，並不是真的執行drop。此時需要用用document的ondragover事件把它直接幹掉。
Event.effectAllowed 屬性：就是拖拽的效果。