推荐:怎么用javascript进行拖拽（4）

Dropping an Item

前面的例子目的很简单，就是拖拽item到我们希望到的地方．我们经常还有其他目的如删除item，比如我们可以将item拖到垃圾桶里，或者其他页面定义的位置．

很不幸，我们有一个很大的难题，当我们拖拽，item会在鼠标之下，比如mouseove,mousedown,mouseup或者其他mouse action．如果我们拖拽一个item到垃圾桶上，鼠标信息还在item上，不在垃圾桶上．

怎么解决这个问题呢？有几个方法可以来解决．第一，这是以前比较推荐的，我们在移动鼠标时item会跟随鼠标，并占用了mouseover/mousemove等鼠标事件，我们不这样做，只是让item跟随着鼠标，并不占用mouseover等鼠标事件，这样会解决问题，但是这样并不好看，我们还是希望item能直接跟在mouse下．

另一个选择是不做item的拖拽．你可以改变鼠标指针来显示需要拖拽的item，然后放在鼠标释放的位置．这个解决方案，也是因为美学原因不予接受．

最后的解决方案是，我们并不去除拖拽效果．这种方法比前两种繁杂许多，我们需要定义我们需要释放目标的列表，当鼠标释放时，手工去检查释放的位置是否是在目标列表位置上，如果在，说明是释放在目标位置上了．

/*
All code from the previous example is needed with the exception
of the mouseUp function which is replaced below
*/

var dropTargets = [];

function addDropTarget(dropTarget){
 dropTargets.push(dropTarget);
}

function mouseUp(ev){
 ev           = ev || window.event;
 var mousePos = mouseCoords(ev);

 for(var i=0; i<dropTargets.length; i++){
  var curTarget  = dropTargets[i];
  var targPos    = getPosition(curTarget);
  var targWidth  = parseInt(curTarget.offsetWidth);
  var targHeight = parseInt(curTarget.offsetHeight);

  if(
   (mousePos.x > targPos.x)                &&

   (mousePos.x < (targPos.x + targWidth))  &&
   (mousePos.y > targPos.y)                &&
   (mousePos.y < (targPos.y + targHeight))){
    // dragObject was dropped onto curTarget!
  }
 }

 dragObject   = null;
}

运行代码框

<script>var iMouseDown  = false;var dragObject  = null;Number.prototype.NaN0=function(){return isNaN(this)?0:this;}// Demo 0 variablesvar DragDrops   = [];var curTarget   = null;var lastTarget  = null;function makeDraggable(item){ if(!item) return; item.onmousedown = function(ev){  dragObject  = this;  mouseOffset = getMouseOffset(this, ev);  return false; }}function getMouseOffset(target, ev){ ev = ev || window.event; var docPos    = getPosition(target); var mousePos  = mouseCoords(ev); return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y};}function getPosition(e){ var left = 0; var top  = 0; while (e.offsetParent){  left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0);  top  += e.offsetTop  + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0);  e     = e.offsetParent; } left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0); top  += e.offsetTop  + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0); return {x:left, y:top};}function mouseCoords(ev){ if(ev.pageX || ev.pageY){  return {x:ev.pageX, y:ev.pageY}; } return {  x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,  y:ev.clientY + document.body.scrollTop  - document.body.clientTop };}function mouseDown(ev){ ev         = ev || window.event; var target = ev.target || ev.srcElement; if(target.onmousedown || target.getAttribute('DragObj')){  return false; }}function mouseUp(ev){ //dragObject = null; if(dragObject){  ev           = ev || window.event;  var mousePos = mouseCoords(ev);  var dT = dragObject.getAttribute('droptarget');  if(dT){   var targObj = document.getElementById(dT);   var objPos  = getPosition(targObj);   if((mousePos.x > objPos.x) && (mousePos.y > objPos.y) && (mousePos.x<(objPos.x+parseInt(targObj.offsetWidth))) && (mousePos.y<(objPos.y+parseInt(targObj.offsetHeight)))){    var nSrc = targObj.getAttribute('newSrc');    if(nSrc){     dragObject.src = nSrc;     setTimeout(function(){      if(!dragObject || !dragObject.parentNode) return;      dragObject.parentNode.removeChild(dragObject);      dragObject = null;     }, parseInt(targObj.getAttribute('timeout')));    } else {     dragObject.parentNode.removeChild(dragObject);    }   }  } } dragObject = null; iMouseDown = false;}function mouseMove(ev){ ev         = ev || window.event; /* We are setting target to whatever item the mouse is currently on Firefox uses event.target here, MSIE uses event.srcElement */ var target   = ev.target || ev.srcElement; var mousePos = mouseCoords(ev); if(dragObject){  dragObject.style.position = 'absolute';  dragObject.style.top      = mousePos.y - mouseOffset.y;  dragObject.style.left     = mousePos.x - mouseOffset.x; } // track the current mouse state so we can compare against it next time lMouseState = iMouseDown; // this prevents items on the page from being highlighted while dragging if(curTarget || dragObject) return false;}function addDropTarget(item, target){ item.setAttribute('droptarget', target);}document.onmousemove = mouseMove;document.onmousedown = mouseDown;document.onmouseup   = mouseUp;window.onload = function (){ makeDraggable(document.getElementById('DragImage9')); makeDraggable(document.getElementById('DragImage10')); makeDraggable(document.getElementById('DragImage11')); makeDraggable(document.getElementById('DragImage12')); addDropTarget(document.getElementById('DragImage9'),  'TrashImage1'); addDropTarget(document.getElementById('DragImage10'), 'TrashImage1'); addDropTarget(document.getElementById('DragImage11'), 'TrashImage1'); addDropTarget(document.getElementById('DragImage12'), 'TrashImage1');}</script><FIELDSET id=Demo6 style="HEIGHT: 70px"><h3>Demo - Drag any image onto the trashcan</h3><IMG id=TrashImage1 src="https://img.aspxhome.com/file/UploadPic/20079/21/2007921203952717.gif" timeout="600" newSrc="/file/UploadPic/20079/21/2007921203952365.gif">       <IMG id=DragImage9 src="https://img.aspxhome.com/file/UploadPic/20079/21/2007921203951964.gif"><IMG id=DragImage10 src="https://img.aspxhome.com/file/UploadPic/20079/21/2007921203951595.gif"><IMG id=DragImage11 src="https://img.aspxhome.com/file/UploadPic/20079/21/2007921203951331.gif"><IMG id=DragImage12 src="https://img.aspxhome.com/file/UploadPic/20079/21/2007921203952145.gif"> </FIELDSET>

鼠标释放时会去取是否有drop属性，如果存在，同时鼠标指针还在drop的范围内，执行drop操作．我们检查鼠标指针位置是否在目标范围是用(mousePos.x>targetPos.x)，而且还要符合条件(mousePos.x<(targPos.x + targWidth))．如果所有的条件符合，说明指针确实在范围内，可以执行drop指令了．