在Html4中，我們可以通過監聽mousedown、mousemove、mouseup來實現拖放效果。在Html5中，直接提供了支持拖放操作的API，我們可以很簡單的幾步就可以實現拖放的效果。
實現的概要
首先我們了解下跟拖動相關的事件：
| 事件 | 產生的源對象 | 說明 |
| dragstart | 被拖動的元素 | 開始拖放動作 |
| drag | 被拖動的元素 | 拖放過程中 |
| dragenter | 拖動過程中鼠標經過的元素 | 被拖動的元素開始進入本元素的范圍內 |
| dragleave | 拖動過程中鼠標經過的元素 | 被拖動的元素離開本元素的范圍 |
| drop | 拖放的目標元素 | 有其他元素拖動到了本元素中 |
| dragend | 拖動的對象元素 | 拖動結束 |
| dragover | 拖動過程中鼠標經過的元素 | 被拖動的元素在本元素上移動 |
實現步驟：
1.我們要想一個元素可以被拖動，同時需要將元素的draggable屬性設置為true（img、a默認允許拖放）；
2.監聽拖動相關的事件。
Demo
我們實現一個將幾個商品拖入的購物車的一個簡單Demo，效果如下：
首先看下Html代碼：
<body onload="init()"> <span>商品列表</span> <div class="goodsList"> <div class="goods" draggable="true"> ThinkPad T410i</div> <div class="goods" draggable="true"> Ipad 2</div> </div> <span>已選商品：</span> <div id="box" style="width: 200px; height: 200px; border: 1px solid green;"> </div> </body>
Javascirpt:
function init() { var goodsList = getElementsbyClassName('goods'); var box = document.getElementById('box'); for (var i = 0; i < goodsList.length; i++) { goodsList[i].addEventListener('dragstart', function (ev) { var dt = ev.dataTransfer; dt.effectAllowed = 'all'; dt.setData('text/plain', this.textContent); }, false); } box.addEventListener('dragend', function (ev) { ev.preventDefault(); }, false); box.addEventListener('drop', function (ev) { var dt = ev.dataTransfer; var goodsName = dt.getData('text/plain'); box.textContent += goodsName; ev.preventDefault(); ev.stopPropagation(); }, false); }
解釋下上面的代碼：
1.獲取class為goods的元素，在dragstart的時候，將自己本元素的textContext傳遞給dataTransfer（下面會說明dataTransfer對象的作用）；
2.在將goods拖動到box時候，獲取dataTransfer數據，並顯示出來；
3.preventDefault的作用是，對於目標元素，默認的情況下是不允許接收元素的，所以必須在dragend或則dragover事件內調用preventDefault。
關於DataTransfer對象
我們通過上面的例子知道拖動時是通過DataTransfer來進行拖動元素之間的數據傳遞的，同時我們也可以通過設置DataTansfer里面的相關屬性來實現一些拖動的額外效果。下面看下DataTransfer的屬性與方法：
| 屬性/方法 | 作用 |
| dropEffect屬性 | 拖放操作的視覺效果，可以指定為none、copy、link、move |
| effectAllowed屬性 | 指定當元素被拖放時所允許的視覺效果 |
| types屬性 | 存入數據的種類 |
| cleraData(DomString format) | 清楚DataTransfer對象中存放的數據 |
| setData(DOMString format,DomString data) | 存入數據 |
| DOMString getData(DOMString format) | 從DataTransfer對象中讀取數據 |
| setDragImange(Element image，long x,long y) | 用img元素來設置拖放圖標 |
這里有幾個要說明的：
1.現在拖動處理所支持的MIME類型為以下幾種：
text/plain:文本文字；
text/html:HTML文字；
text/xml:xml；
text/uri-list:url列表。
對於dropEffect、effectAllowed屬性使用的幾個注意的地方：
一般的時候我們在ondragstart事件中去設置effectAllowed值，在ondragover事件中指定dropEffect值。其中如果effectAllowed屬性設置為none，則不允許拖動，如果dropEffect屬性設置為none，則不允許拖放到目標元素中。
總結
通過本篇Post，了解了Html5中拖放的新的API，比起html4實現起來要簡單很多。下面的文章會繼續一步步學習Html5其他方面的相關特性。