WEB开发网
开发学院网页设计JavaScript 用Javascript实现鼠标拖拽网页表单 阅读

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

 2010-09-14 13:03:55 来源:WEB开发网   
核心提示: 另一个选择是不做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指令了.

上一页  1 2 3 4 5 6 7  下一页

Tags:Javascript 实现 鼠标

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接