JS拖放总结

目前，有两种使用JavaScript的方法来实现拖放功能，系统拖放和模拟拖放。 首先，我们要明白的是系统拖放是IE only的，也就是说目前只有在IE上才能实现系统拖放。 对于系统拖放，IE默认给我们并让我们Drag的元素并不多，其中有图片，文本和链接。当我们拖动一个元素时，会触发以下事件： ondragstart:当按下鼠标按钮，开始移动鼠标时，在被拖动的项上触发的事件。 ondrag:ondragstart出发后，ondrag会一直出发，只要对象还在拖动，就一直触发。 ondragend:当拖动停止时（在有效的或无效的放置对象上放下该项）,则触发ondragend事件 而目的对象，也就是要Drop的元素上触发的事件为: ondragenter:当对象被拖放到有效的放置目标上，会触发ondragenter事件。 ondragover:在dragenter事件发生后，将立即触发dragover事件，当被拖动的项在放置目标的边界内时，将一直触发。 ondragleave:当项被拖出放置目标后，dragover事件停止触发，并且触发dragleave事件。 ondrop:如果呗拖放的项正好是在这个目标上放下的，则会触发drop事件。 一般来说，被拖动的项的事件总是先发生，除了drop事件要比dragend先触发。因此，将一个对象拖动到两一个对象所触发的事件的顺序如下： ondragstart->ondrag->ondragenter->ondragover->(ondragleave|ondrop)->ondragend 但是仅仅拖放是毫无用处的，除非数据能真正受到影响，IE是引入event的一个特性，dataTransfer对象来帮助进行数据传输的。该对象有两个方法，getData()和setData(),getData()用来获取由setData()存储的值。可以设置两种类型的数据：普通文本和URL；dataTransfer还可以用来判断，对被拖放的物体以及目标可以做哪种类型的动作。这主要通过两个特性来完成,dropEffect和effectAllowed,dropEffect用很多值可供选择，如copy,move等。它只能在ondragstart事件中初始化。如下的例子：

function handleDragDropEvent(oEvent) { switch(oEvent.type) { case "dragstart": oEvent.dataTransfer.effectAllowed="move"; break; case "dragenter": // oEvent.dataTransfer.dropEffect="move"; oEvent.returnValue=false; break; case "dragover": oEvent.returnValue=false; break; case "drop": oEvent.returnValue=false; oEvent.srcElement.innerHTML=oEvent.dataTransfer.getData("text"); } }

<p><input type="text" value="drag this text" οndragstart="handleDragDropEvent(event)" /></p> <div style="background-color:Red; height:100px; width:100px;" οndragenter="handleDragDropEvent(event)" οndragοver="handleDragDropEvent(event)" οndrοp="handleDragDropEvent(event)"></div>

前面我们学了如何创建自己的放置目标，dragDrop方法可以让我们创建自己的拖动目标.通过调用dragDrop方法来初始化系统拖动对象，可以让一般情况下不能拖动的项触发dragstart,drag和dragend事件

function handleMouseMove(oEvent) { if(oEvent.button==1) { oEvent.srcElement.dragDrop(); } } function handleDragDropEvent(oEvent) { oEvent.dataTransfer.setData("text","This is a red square"); }

<p><div style="background-color:Red; height:100px; width:100px;" οnmοusemοve="handleMouseMove(event)" οndragstart="handleDragDropEvent(event)">This is a red</div></p> <p><input type="text" value=""/></p>

而在非IE要实现拖放怎么办呢，这是就要用到虚拟拖放，虚拟拖放的思想很简单：创建可以跟着鼠标移动的绝对定位层，实例代码如下：

var iDiffX=0;//鼠标横坐标和div横坐标之间的差值 var iDiffY=0;//鼠标纵坐标和div纵坐标之间的差值 function handleMouseMove() { var oEvent=window.event; var oDiv=document.getElementById("div1"); oDiv.style.left=oEvent.clientX-iDiffX; oDiv.style.top=oEvent.clientY-iDiffY; } function handleMouseDown() { var oEvent=window.event; var oDiv=document.getElementById("div1"); iDiffX=oEvent.clientX-oDiv.offsetLeft;//offsetLeft返回当前元素的左边界到它的包含元素的左边界的偏移量，以像素为单位 iDiffY=oEvent.clientY-oDiv.offsetTop;//offsetTop返回当前元素的上边界到它的包含元素的上边界的偏移量，以像素为单位。 document.body.attachEvent("onmousemove",handleMouseMove); document.body.attachEvent("onmouseup",handleMouseUp); } function handleMouseUp() { var oEvent=window.event; document.body.detachEvent("onmousemove",handleMouseMove); document.body.detachEvent("onmouseup",handleMouseUp); if(isOverDropTarget(oEvent.clientX,oEvent.clientY)) { var oDiv=document.getElementById("div1"); var oTarget=document.getElementById("divDropTarget"); oDiv.style.left=oTarget.offsetLeft; oDiv.style.top=oTarget.offsetTop; } } //该方法接受一个坐标作为参数，如果坐标在放置目标内，则返回True; function isOverDropTarget(iX,iY) { var oTarget=document.getElementById("divDropTarget"); var iX1=oTarget.offsetLeft; var iX2=iX1+oTarget.offsetWidth;//offsetWidth返回元素的宽度 var iY1=oTarget.offsetTop; var iY2=iY1+oTarget.offsetHeight;//offsetHeight返回元素的高度 return (iX>=iX1&&iX<=iX2&&iY>=iY1&&iY<=iY2); }

#div1 { background-color:red; height:100px; width:100px; position:absolute; z-index:10; } #divDropTarget { background-color:blue; height:200px; width:200px; position:absolute; left:300px; }

<div id="div1" οnmοusedοwn="handleMouseDown()" ></div> <div id="divDropTarget"></div>