拖动
是一件非常酷的事情。你点击某个对象,并按住鼠标不放,将鼠标移动到另一个区域,然后释放鼠标按钮将对象放在这里。 下面是一个简单的案例: HTML部分:注意,拖动元素一定要为绝对定义,即position = absolute; 代码如下:
JS部分(dome.js):
-1) {
dragging = target;
diffX = event.clientX - target.offsetLeft;
diffY = event.clientY - target.offsetTop;
}
break;
case "mousemove" :
if (dragging != null) {
target.style.left = event.clientX - diffX + "px";
target.style.top = event.clientY - diffY + "px";
}
break;
case "mouseup" :
dragging = null;
break;
}
}
return {
enable : function () {
EventUtil.addEvent(document,"mousedown",handleEvent);
EventUtil.addEvent(document,"mousemove","mouseup",handleEvent);
},disable : function () {
EventUtil.delEvent(document,handleEvent);
EventUtil.delEvent(document,handleEvent);
}
}
}();
DragDrop.enable();
这里需要讲解的是diffX和diffY,它们表示元素左上角与鼠标指针的差值。 diffX = 鼠标的x坐标 - 元素对象的offsetLeft diffY = 鼠标的y坐标 - 元素对象的offsetTop
以上就是本文的全部内容,希望对大家的学习有所帮助。