HTML5 拖放（Drag 和 Drop）
定義：
拖曳是一種常見的特性，即抓取物件以後拖曳到另一個位置。
在 HTML5 中，拖曳是標準的一部分，任何元素都能夠拖曳。
1. 說說「拖曳事件」
#拖曳事件，也就是抓取物件以後拖曳到另一個位置
有些事件在被拖放的元素上觸發，有些在放置目標上觸發。在拖曳元素時，依序觸發dragstart事件、drag事件、dragend事件；當某個元素被拖曳到一個有效的放置目標上時，依序觸發dragenter事件、dragover事件dragleave或drop事件。
2. 實作過程
設定元素為可拖曳
<img draggable="true ">
拖曳什麼？當元素被拖曳時，發生的事件（ondragstart和setData()）
ondragstart屬性呼叫一個函數，drag(event)規定看被拖曳的數據，dataTransfer.setData()設定被拖曳資料的資料類型和值。
function drag(ev){
ev.dataTransfer.setData("Text",ev.target.id);
}
放在哪裡？ ondragover 事件規定在何處放置被拖曳的資料
預設地，無法將資料/元素放置到其他元素中。如果需要設定允許放置，則必須阻止對元素的預設處理方式。因此需要透過ondragover事件中的event.preventDefault()方法
event.preventDefault()
進行放置ondrop
先呼叫preventDefault()來避免瀏覽器對數據的預設處理；然後透過dataTransfer.getData(“Text”)方法獲得被拖數據，被拖數據是被拖元素的id;最後把被拖元素追加到放置元素中。
function drop(ev)
{
ev.preventDefault();
#var data=ev.dataTransfer.getData("Text");
#ev.target.appendChild(document.getElementById(data));
}
拖曳(Drag 和Drop)各屬性生命週期
剛才大家已經看到了一些新鮮屬性名詞，如 ondragstart。或許還是很陌生，不知之所以，下面看一張表格或許能豁然開朗：
##拖動生命週期 屬性 值 拖曳操作開始時執行腳本（物件是被拖曳元素） 拖曳過程中 ondrag script 只要腳本在被拖曳就允許腳本（物件是被拖曳元素）
拖曳過程中 ondragenter script 當元素拖曳到一個合法的放置目標時，執行腳本（物件是目標元素）
#拖曳過程中 ondragover script
在拖曳過程中在合法放置時拖曳目標上的放置目標上只要物上拖曳時只要上拖曳元素，在執行腳本（物件是目標元素） 拖曳過程中 ondragleave script 當元素離開合法的放置目標時（物件是目標元素）##" 拖曳結束時將拉元素放在目標元素內時執行腳本（物件是目標元素）
拖曳結束 ondragend script 拖曳操作結束時執行腳本（物件是拖曳元素）
#
<!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; /*获取事件对象*/
},
getTarget:function(event){
return event.target||event.srcElement; /*获取目标元素*/
},
preventDefault:function(event){ /*取消事件的默认设置*/
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>####
