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>