先介紹一下html5的drag想要啟用drag，只要給元素加上draggable="true"就行了（firefox除外，后面會講到），默認(rèn)a和img就是可以拖動的。
在線演示地址http://jsrun.net/JpiKp/edit，但是在firefox中只是這樣還是無法拖動的。還需要加上拖動事件
拖動事件
事件分為兩類，當(dāng)前拖動的元素上的事件，以及要放置的位置接收到的事件。
一.發(fā)生在拖動元素上的事件：
| 事件名 | 觸發(fā)時機(jī) | 觸發(fā)次數(shù) |
|---|---|---|
| dragstart | 當(dāng)拖動開始時觸發(fā)一次 | 1 |
| drag | 拖動開始后反復(fù)觸發(fā) | n |
| dragend | 拖動結(jié)束后觸發(fā)一次 | 1 |
二.發(fā)生在目標(biāo)元素上的事件
| 事件名 | 觸發(fā)時機(jī) | 觸發(fā)次數(shù) |
|---|---|---|
| dragenter | 當(dāng)拖動元素進(jìn)入目標(biāo)時觸發(fā)一次 | 1 |
| dragover | 當(dāng)拖動元素在目標(biāo)元素范圍內(nèi)時反復(fù)觸發(fā) | n |
| drop | 拖動元素在目標(biāo)元素內(nèi)釋放時(在設(shè)置了dropover事件的前提下) | 1 |
可以通過addEventListener來添加事件監(jiān)聽或者直接使用dom0，在firefox中就必須添加dragstart事件并使用event.dataTransfer.setData來添加傳遞信息
信息傳遞
在拖動元素時可以設(shè)置傳遞的信息
event.dataTransfer.setData("te", “sss);兩個參數(shù)，第一個參數(shù)key，第二個參數(shù)value。注意只能傳遞字符串和url，但是在firefox使用text或Text作為key時會打開新的標(biāo)簽頁，所以不要用他們作為key。
阻止瀏覽器默認(rèn)事件
使用event.preventDefault();可以阻止瀏覽器默認(rèn)事件
接下來寫一個簡單的例子，在線演示地址http://jsrun.net/JpiKp/edit
html
<div class="drag" draggable="true">1</div>
<div class="container">容器</div>
js
注意：設(shè)置了dragover后drop才會觸發(fā)??！
var ele=document.querySelector(".drag");
var container=document.querySelector(".container");
ele.ondragstart = function(event) {
console.log("start");
//不能使用text或Text，firefox會打開新tab
event.dataTransfer.setData("te", event.target.innerText);
};
container.ondrop = function(event) {
console.log("onDrop");
var text = event.dataTransfer.getData("te");
alert(text);
event.preventDefault();
}
container.ondragover = function(event) {
console.log("onDrop over");
event.preventDefault();
}
其他事件大家可以自己試一試
