用Javascript实现鼠标拖拽网页表单

核心提示： 另一个选择是不做item的拖拽．你可以改变鼠标指针来显示需要拖拽的item，然后放在鼠标释放的位置．这个解决方案，用Javascript实现鼠标拖拽网页表单(5)，也是因为美学原因不予接受．最后的解决方案是，我们并不去除拖拽效果．这种方法比前两种繁杂许多，执行drop操作．我们检查鼠标指针

另一个选择是不做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;
}

点击这里查看代码运行效果

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