今天我們來介紹一下h5的拖放事件：
拖放事件
H5的拖放事件提供了多個接口：
1、drag：當元素或者選中的文本被拖動時觸發（每幾百毫秒觸發一次），應用在被拖拽元素上
2、dragend：當拖動操作結束時觸發（通過釋放鼠標按鈕或者點擊轉義鍵），應用在被拖拽元素上
3、dragenter：當一個被拖動的元素或者選中的文本進入一個有效的放置目標時觸發，應用在目標元素上
4、dragexit：當元素不再是拖動操作的直接選擇元素時觸發（很少使用）
5、dragleave：當拖動元素或者選中的文本離開有效的放置區域時觸發，應用在目標元素上
6、dragover：當元素或者選中的文本被拖動到有效放置區域上方時觸發（每幾百毫秒觸發一次），應用在目標元素上
7、dragstart：當用戶開始拖動元素或者拖動選中文本時觸發，應用在被拖拽元素上
8、drop：當元素或選中的文本在有效區域放置時觸發，應用在目標元素上。
event.dataTransfer
在進行拖放操作時，DataTransfer 對象用來保存被拖動的數據。它可以保存一項或多項數據、一種或者多種數據類型
這個對象在所有的拖動事件屬性dataTransfer 都是可用的，但是不能單獨創建。
dataTransfer方法（比較多，簡單羅列幾個）
setData()
將指定格式的數據賦值給dataTransfer對象，參數format定義數據的格式也就是數據的類型，data為待賦值的數據，有點像jquery里面的data
如果指定的數據類型不存在，它將添加到的末尾，這樣類型列表中的最后一個項目將是新的格式。如果已經存在的數據類型，替換相同的位置的現有數據。就是，當更換相同類型的數據時，不會更改類型列表的順序。
getData(format)
從dataTransfer對象中獲取指定格式的數據，format代表數據格式，如果給定類型的數據不存在或者數據轉存（data transfer）沒有包涵數據，方法將返回一個空字符串。
這個數據將僅僅在放置動作發生時在drop時間中是可用的。
下面是個實例，拖拽元素進行刪除：
css代碼：
* {
margin:0;
padding:0;
}
ul {
list-style:none;
}
li {
width:200px;
height:50px;
background-color:#4590bb;
margin:20px 40px 20px 100px;
}
div {
width:300px;
height:150px;
font-size:40px;
line-height:150px;
text-align:center;
background-color:#b3c6e8;
margin-left:50px;
margin-top:50px;
}
html代碼：
<ul>
<li draggable="true" ondragstart="drag(event)" id="li1" ondragend="dend(event)">1</li>
<li draggable="true" ondragstart="drag(event)" id="li2" ondragend="dend(event)">2</li>
<li draggable="true" ondragstart="drag(event)" id="li3" ondragend="dend(event)">3</li>
<li draggable="true" ondragstart="drag(event)" id="li4" ondragend="dend(event)">4</li>
<li draggable="true" ondragstart="drag(event)" id="li5" ondragend="dend(event)">5</li>
<li draggable="true" ondragstart="drag(event)" id="li6" ondragend="dend(event)">6</li>
</ul>
<div id="div" ondragenter="enter(event)" ondragover="over(event)" ondragleave="leave(event)" ondrop="drop(event)">垃圾箱</div>
js代碼：
function drag(event) {
event.target.style.background = "red";
event.dataTransfer.setData("name",event.target.id)
}
function dend(event) {
event.target.style.background = "#4590bb";
}
//拖拽進入標簽范圍
function enter(event) {
document.getElementById("div").innerHTML = "釋放刪除";
}
function leave(event) {
document.getElementById("div").innerHTML = "垃圾箱";
}
function drop(event) {
//阻止瀏覽器默認事件
event.preventDefault();
document.getElementById("div").innerHTML = "正在刪除";
var id = event.dataTransfer.getData("name");
var ul = document.getElementsByTagName("ul")[0];
ul.removeChild(document.getElementById(id));
}
function over(event) {
event.preventDefault();