基礎api瞭解
首先要使得一個元素可以拖動需要在元素上設定 draggable="true"。以下稱被拖動的元素為拖動元素，拖動進入的元素為目標元素
1.dragstart：拖動元素，元素被拖動開始會觸發的事件
2.dragend：拖動元素，元素被拖動後滑鼠放開會觸發的事件
3.dragenter：事件源是目標元素，拖動時滑鼠進入會觸發的事件。需要注意的是滑鼠進入而不是元素進入。
4.dragover：事件源是目標元素，拖動元素在目標元素內移動會不停觸發該事件
5.drop：事件源是目標元素，拖動元素在目標元素內被放開觸發的事件，注意要觸發該事件必須要取消dragover的預設事件（e.preventDefault()）
傳遞資料
h5還提供了一些介面用來方便拖放事件傳遞資料
1.e.dataTransfer.setData('data',data)傳遞資料，例如data可以是拖動元素的id使得目標元素可以判斷是哪個元素被拖進了自己
2.e.dataTransfer.getData('data')接收資料
實踐
功能：拖動列表項到目標列表項上那麼拖動的列表項就會排在目標列表項的前面。拖動列表項到刪除框內可以刪除該列表項
實現的方法：h5拖放的api和傳遞資料的api 以及事件委託
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> li { width: 200px; height: 40px; background-color: #ccc; margin: 20px; list-style: none; display: block; } #trash-box { width: 300px; height: 200px; background-color: #000; color: #fff; } </style></head><body> <ul> <li class="drag-item1" draggable="true">列表項1</li> <li class="drag-item2" draggable="true">列表項2</li> <li class="drag-item3" draggable="true">列表項3</li> <li class="drag-item4" draggable="true">列表項4</li> <li class="drag-item5" draggable="true">列表項5</li> </ul> <div id="trash-box">刪除列表</div> <script type="text/javascript"> let trashBox = document.getElementById('trash-box'), ul = document.getElementsByTagName('ul')[0]; ul.addEventListener('dragstart', function (e) { let className = e.target.className e.dataTransfer.setData('data', className) }) ul.addEventListener('dragover', function (e) { e.preventDefault(); }) ul.addEventListener('drop', function (e) { if (e.target.nodeName === 'LI') { let moveClass = e.dataTransfer.getData('data') let moveLi = document.getElementsByClassName(moveClass)[0] this.insertBefore(moveLi, e.target) } }) trashBox.addEventListener('dragover', function (e) { e.preventDefault(); }) trashBox.addEventListener('drop', function (e) { let deletClass = e.dataTransfer.getData('data'); let deletLi = document.getElementsByClassName(deletClass)[0]; deletLi.remove(); }) </script></body></html>複製程式碼效果圖：