HTML5篇是拖拽學(xué)習(xí)的最后一篇了，O(∩_∩)O哈哈~。！
參考傳送門：http://www.cnblogs.com/fsjohnhuang/p/3961066.html#t3，這位猿還是很有耐性的，介紹的很詳細(xì)啊，下了大功夫啊(__) 嘻嘻……。
HTML5之前，要實現(xiàn)網(wǎng)頁元素的拖放操作，需要依靠mousedown、mousemove、mouseup等API，通過大量的JS代碼來實現(xiàn)；HTML5中引入了直接支持拖放操作的API，大大簡化了網(wǎng)頁元素的拖放操作編程難度，并且這些API除了支持瀏覽器內(nèi)部元素的拖放外，同時支持瀏覽器和其它應(yīng)用程序之間的數(shù)據(jù)互相拖動。
相關(guān)API###
1、DataTransfer 對象：拖拽對象用來傳遞的媒介，使用一般為Event.dataTransfer。內(nèi)部方法：
- setData(type, data)：設(shè)置被拖數(shù)據(jù)的數(shù)據(jù)類型和值;
- getData(type)：獲取拖動數(shù)據(jù)值；
- clearData(type)：數(shù)據(jù)清除。
2、 draggable 屬性：就是標(biāo)簽元素要設(shè)置draggable=true，否則不會有效果，例如：
<div title="拖拽我" draggable="true">列表1</div>
3、ondrag：表示鼠標(biāo)拖拽的過程,類似于onmousemove。作用在源元素上。
4、ondragstart 事件：當(dāng)拖拽元素開始被拖拽的時候觸發(fā)的事件，此事件作用在被拖拽元素上（源元素）。
5、ondragenter 事件：當(dāng)拖曳元素進(jìn)入目標(biāo)元素的時候觸發(fā)的事件，此事件作用在目標(biāo)元素上。
6、ondragover 事件：拖拽元素在目標(biāo)元素上移動的時候觸發(fā)的事件，此事件作用在目標(biāo)元素上。
7、ondrop 事件：被拖拽的元素在目標(biāo)元素上同時鼠標(biāo)放開觸發(fā)的事件，此事件作用在目標(biāo)元素上。
8、ondragend 事件：當(dāng)拖拽完成后觸發(fā)的事件，此事件作用在被拖曳元素上。
9、dragleave事件：源元素離開目標(biāo)元素,觸發(fā)該事件。
10、Event.preventDefault() 方法：阻止默認(rèn)的些事件方法等執(zhí)行。在ondragover中一定要執(zhí)行preventDefault()，否則ondrop事件不會被觸發(fā)。另外，如果是從其他應(yīng)用軟件或是文件中拖東西進(jìn)來，尤其是圖片的時候，默認(rèn)的動作是顯示這個圖片或是相關(guān)信息，并不是真的執(zhí)行drop。此時需要在目標(biāo)元素的ondragover事件中把它直接干掉。
11、Event.effectAllowed 屬性：就是拖拽的效果，鼠標(biāo)指針類型，僅能在dragover中設(shè)置。
簡單例子：###
<!DOCTYPE html>
<html>
<head>
<title>實現(xiàn)HTML5中的拖拽效果</title>
<meta charset="utf-8"/>
<meta name='author' content='NARUTOne'>
<style>
#d1 {
width : 300px;
height : 300px;
border : solid 1px black;
float : left;
}
#d2 {
width : 300px;
height : 300px;
border : solid 1px black;
float : right;
}
</style>
</head>
<body>
<!-- 用于顯示源元素(DATA文件夾) -->
<div id="d1">
<p>源元素</p>
<!-- 將該圖片作為源元素 -->
[站外圖片上傳中……(3)]</img>
</div>
<!-- 用于顯示目標(biāo)元素(PROJECT文件夾) -->
<div id="d2">
<p>目標(biāo)元素</p>
</div>
<script>
// 1. 獲取源元素 - 圖片元素
var ele1 = document.getElementById("myimg");
var d1 = document.getElementById("d1");
// 2. 獲取目標(biāo)元素 - id為d2的div元素
var d2 = document.getElementById("d2");
// 3. 源元素事件 - dragstart事件
ele1.addEventListener("dragstart",function(event){
// a. 獲取到源元素使用的數(shù)據(jù) - src屬性值
var mysrc = ele1.src;
console.log(mysrc);
// b. 將數(shù)據(jù)設(shè)置到dataTransfer對象中
event.dataTransfer.setData("text",mysrc);//text,指數(shù)據(jù)類型type
});
// 4. 目標(biāo)元素事件 - drop事件;自定義處理拖放過程
d2.addEventListener("drop",function(event){
// a. 阻止頁面的默認(rèn)行為
event.preventDefault();
// b. 從dataTransfer對象得到數(shù)據(jù)
var mysrc = event.dataTransfer.getData("text");//返回指定type的數(shù)據(jù)
// c. 創(chuàng)建<img>元素,設(shè)置一些屬性
var myimg = document.createElement("img");
myimg.src = mysrc;
myimg.id = 'myimg';
myimg.width = "200";
// f. 將源元素從頁面中刪除
var removeElem = document.getElementById('myimg');
d1.removeChild(removeElem);
// d. 將<img>元素添加到id為d2的div元素中
d2.appendChild(myimg);
// e. 清除dataTransfer對象中的數(shù)據(jù)內(nèi)容
event.dataTransfer.clearData("text");
});
/*
* dragover和dragleave事件
* * dragover - 源元素到達(dá)目標(biāo)元素
* * dragleave - 源元素離開目標(biāo)元素
* * 上述兩個事件組合效果 - 拖拽效果
* drop事件
* * 完成邏輯
*/
d2.addEventListener("dragover",function(){
event.preventDefault();
});
d2.addEventListener("dragleave",function(){
event.preventDefault();
});
//d1作為目標(biāo)元素
d1.addEventListener("drop",function(event){
event.preventDefault();
// b. 從dataTransfer對象得到數(shù)據(jù)
var mysrc = event.dataTransfer.getData("text");
// c. 創(chuàng)建<img>元素,設(shè)置一些屬性
var myimg = document.createElement("img");
myimg.src = mysrc;
myimg.width = "200";
myimg.id = 'myimg';
// f. 將源元素從頁面中刪除
var removeElem = document.getElementById('myimg');
d2.removeChild(removeElem);
d1.appendChild(myimg);
event.dataTransfer.clearData("text");
});
d1.addEventListener("dragover",function(){
event.preventDefault();
});
d1.addEventListener("dragleave",function(){
event.preventDefault();
});
/*
setDragImage()用于在拖放過程中，修改鼠標(biāo)指針?biāo)赶虻膱D像
event.dataTransfer.setDragImage(image,x,y);
event.target;返回觸發(fā)事件的元素（事件的目標(biāo)節(jié)點）
*/
</script>
</body>
</html>
效果圖，但是比較丑(????)：
HTML5是存在兼容性問題的，則drag and drop (DnD)也是有兼容性問題的。例：IE6-7在dataTransfer對象存在兼容性問題。具體的兼容問題，還是需要具體問題具體解決了！
如果猿（媛）們想要了解更加具體的HTML5拖拽問題和技術(shù)，我建議可以看看文章開頭的參考鏈接里面的文章，寫的還是很好的。我本來想多借鑒下，寫寫文章什么的，想想還是算了(__) 嘻嘻……。畢竟人家找資料總結(jié)也是不容易啊。
