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>