HTML5 拖放（Drag 和 Drop）
定義：
拖放是一種常見的特性，即抓取對象以后拖到另一個位置。
在 HTML5 中，拖放是標準的一部分，任何元素都能夠拖放。
1. 說說“拖放事件”
拖放事件，即抓取對象以后拖動到另一個位置
有些事件在被拖放的元素上觸發(fā)，有些在放置目標上觸發(fā)。在拖動元素時，依次觸發(fā)dragstart事件、drag事件、dragend事件；當某個元素被拖動到一個有效的放置目標上時，依次觸發(fā)dragenter事件、dragover事件dragleave或者drop事件。
2. 實現(xiàn)過程
設(shè)置元素為可拖放
<img draggable="true">
拖動什么？當元素被拖動時，發(fā)生的事件（ondragstart和setData()）
ondragstart屬性調(diào)用一個函數(shù)，drag(event)規(guī)定看被拖動的數(shù)據(jù)，dataTransfer.setData()設(shè)置被拖放數(shù)據(jù)的數(shù)據(jù)類型和值。
function drag(ev){
ev.dataTransfer.setData("Text",ev.target.id);
}
放在何處？ondragover 事件規(guī)定在何處放置被拖動的數(shù)據(jù)
默認地，無法將數(shù)據(jù)/元素放置到其他元素中。如果需要設(shè)置允許放置，必須阻止對元素的默認處理方式。因此需要通過ondragover事件中的event.preventDefault()方法
event.preventDefault()
進行放置ondrop
首先調(diào)用preventDefault()來避免瀏覽器對數(shù)據(jù)的默認處理；然后通過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?；蛟S還是很陌生，不知其所以，下面看一張表格或許能豁然開朗：
拖動生命周期 屬性 值 描述
拖動開始 ondragstart script 在拖動操作開始時執(zhí)行腳本（對象是被拖拽元素）
拖動過程中 ondrag script 只要腳本在被拖動就允許腳本（對象是被拖拽元素）
拖動過程中 ondragenter script 當元素被拖動到一個合法的放置目標時，執(zhí)行腳本（對象是目標元素）
拖動過程中 ondragover script 只要元素正在合法的放置目標上拖動時，就執(zhí)行腳本（對象是目標元素）
拖動過程中 ondragleave script 當元素離開合法的放置目標時（對象是目標元素）
拖動結(jié)束 ondrop script 將被拖拽元素放在目標元素內(nèi)時運行腳本（對象是目標元素）
拖動結(jié)束 ondragend script 在拖動操作結(jié)束時運行腳本（對象是被拖拽元素）
<!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){ /*取消事件的默認設(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>
![Beginnen Sie schnell mit dem Golang Gin-Framework [Verwenden Sie Gin, um ein gleichzeitiges IM-Instant-Messaging-System auf Millionenebene aufzubauen]](https://img.php.cn/upload/course/000/000/068/63a2b21046723283.jpg)
