HTML5 拖放（Drag 和 Drop）
定義：
拖放是一種常見(jiàn)的特性，即抓取對(duì)象以后拖到另一個(gè)位置。
在 HTML5 中，拖放是標(biāo)準(zhǔn)的一部分，任何元素都能夠拖放。
1. 說(shuō)說(shuō)“拖放事件”
拖放事件，即抓取對(duì)象以后拖動(dòng)到另一個(gè)位置
有些事件在被拖放的元素上觸發(fā)，有些在放置目標(biāo)上觸發(fā)。在拖動(dòng)元素時(shí)，依次觸發(fā)dragstart事件、drag事件、dragend事件；當(dāng)某個(gè)元素被拖動(dòng)到一個(gè)有效的放置目標(biāo)上時(shí)，依次觸發(fā)dragenter事件、dragover事件dragleave或者drop事件。
2. 實(shí)現(xiàn)過(guò)程
設(shè)置元素為可拖放
<img draggable="true">
拖動(dòng)什么？當(dāng)元素被拖動(dòng)時(shí)，發(fā)生的事件（ondragstart和setData()）
ondragstart屬性調(diào)用一個(gè)函數(shù)，drag(event)規(guī)定看被拖動(dòng)的數(shù)據(jù)，dataTransfer.setData()設(shè)置被拖放數(shù)據(jù)的數(shù)據(jù)類型和值。
function drag(ev){
? ?ev.dataTransfer.setData("Text",ev.target.id);
}
放在何處？ondragover 事件規(guī)定在何處放置被拖動(dòng)的數(shù)據(jù)?
默認(rèn)地，無(wú)法將數(shù)據(jù)/元素放置到其他元素中。如果需要設(shè)置允許放置，必須阻止對(duì)元素的默認(rèn)處理方式。因此需要通過(guò)ondragover事件中的event.preventDefault()方法
event.preventDefault()
進(jìn)行放置ondrop?
首先調(diào)用preventDefault()來(lái)避免瀏覽器對(duì)數(shù)據(jù)的默認(rèn)處理；然后通過(guò)dataTransfer.getData(“Text”)方法獲得被拖數(shù)據(jù)，被拖數(shù)據(jù)是被拖元素的id;最后把被拖元素追加到放置元素中。
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
拖放(Drag 和 Drop)各屬性生命周期
剛才大家已經(jīng)看到了一些新鮮屬性名詞，如?ondragstart。或許還是很陌生，不知其所以，下面看一張表格或許能豁然開(kāi)朗：
拖動(dòng)生命周期 ? ?屬性 ? ? ? ? ? 值 ? ? ? ? ? ? ? 描述 ? ?
拖動(dòng)開(kāi)始 ? ?ondragstart ? ?script ? ?在拖動(dòng)操作開(kāi)始時(shí)執(zhí)行腳本（對(duì)象是被拖拽元素） ? ?
拖動(dòng)過(guò)程中 ? ?ondrag ? ?script ? ?只要腳本在被拖動(dòng)就允許腳本（對(duì)象是被拖拽元素） ? ?
拖動(dòng)過(guò)程中 ? ?ondragenter ? ?script ? ?當(dāng)元素被拖動(dòng)到一個(gè)合法的放置目標(biāo)時(shí)，執(zhí)行腳本（對(duì)象是目標(biāo)元素） ? ?
拖動(dòng)過(guò)程中 ? ?ondragover ? ?script ? ?只要元素正在合法的放置目標(biāo)上拖動(dòng)時(shí)，就執(zhí)行腳本（對(duì)象是目標(biāo)元素） ? ?
拖動(dòng)過(guò)程中 ? ?ondragleave ? ?script ? ?當(dāng)元素離開(kāi)合法的放置目標(biāo)時(shí)（對(duì)象是目標(biāo)元素） ? ?
拖動(dòng)結(jié)束 ? ?ondrop ? ?script ? ?將被拖拽元素放在目標(biāo)元素內(nèi)時(shí)運(yùn)行腳本（對(duì)象是目標(biāo)元素） ? ?
拖動(dòng)結(jié)束 ? ?ondragend ? ?script ? ?在拖動(dòng)操作結(jié)束時(shí)運(yùn)行腳本（對(duì)象是被拖拽元素）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<style>
#divDrag{width:200px;height:20px;margin:10px;border:2px solid #111;}
#divArea{width:300px;margin:10px 0;height:300px;border:2px solid #ddd;}
#divTips{width:300px;background-color:#eee;}
</style>
<script type="text/javascript">
function getThisId(id){ return document.getElementById(id);}
var EventUtil={
addHandler:function(element,type,handler){
if(element.addEventListener){element.addEventListener(type,handler,false);}
else if(element.attachEvent){element.attachEvent("on"+type,handler);}else{element["on"+type]=handler;}
},
removeHandler:function(element,type,handler){
if(element.removeEventListener){element.removeEventListener(type,handler,false);}
else if(element.detachEvent){element.detachEvent("on"+type,handler);}else{element["on"+type]=null;}
},
getEvent:function(event){
return event? event:window.event; /*獲取事件對(duì)象*/
},
getTarget:function(event){
return event.target||event.srcElement; /*獲取目標(biāo)元素*/
},
preventDefault:function(event){ /*取消事件的默認(rèn)設(shè)置*/
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue=false;
}
},
stopPropagation:function(event){ /*取消事件冒泡*/
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble=true;
}
}
};
window.onload = function(){
var Drag = getThisId("divDrag");
var Area = getThisId("divArea");
var objImg = document.createElement("img");
objImg.src = "l.jpg"
EventUtil.addHandler(Drag,"dragstart",function(e){
var objDtf = e.dataTransfer;
objDtf.setData("text",EventUtil.getTarget(e).id);
objDtf.setDragImage(objImg,0,0);
});
EventUtil.addHandler(Area,"dragover",function(e){
EventUtil.preventDefault(e);
EventUtil.stopPropagation(e);
});
EventUtil.addHandler(Area,"drop",function(e){
EventUtil.preventDefault(e);
EventUtil.stopPropagation(e);
var objDtf = e.dataTransfer;
var strHTML = objDtf.getData("text");
var replacediv=getThisId(strHTML).cloneNode(false);
EventUtil.getTarget(e).appendChild(replacediv);
});
}
document.ondragover = function(e){
e.preventDefault();
}
document.ondrop = function(e){
e.preventDefault();
}
</script>
</head>
<body>
<div id="divFrame">
<div class="wPub" id="dddd">
<img id="divDrag" draggable="true" src="http://e.hiphotos.baidu.com/image/pic/item/f3d3572c11dfa9ec2eece15e61d0f703908fc1bd.jpg">
</div>
<div id="divArea"></div>
</div>
</body>
</html>
