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。或许还是很陌生，不知其所以，下面看一张表格或许能豁然开朗：
拖动生命周期 属性 值 描述
拖动开始 ondragstart script 在拖动操作开始时执行脚本（对象是被拖拽元素）
拖动过程中 ondrag script 只要脚本在被拖动就允许脚本（对象是被拖拽元素）
拖动过程中 ondragenter script 当元素被拖动到一个合法的放置目标时，执行脚本（对象是目标元素）
拖动过程中 ondragover script 只要元素正在合法的放置目标上拖动时，就执行脚本（对象是目标元素）
拖动过程中 ondragleave script 当元素离开合法的放置目标时（对象是目标元素）
拖动结束 ondrop 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>
一辆想出轨的无轨电车
这个挺好的。。
8年前 添加回复 0