分析:
1.鼠标按下,拖拽开始,鼠标移动,拖拽进行,鼠标抬起,拖拽结束(三个事件)
2.被拖动元素与鼠标之间的位置在拖动过程中始终不变,利用这个原理,被拖动元素的位置就是鼠标的左(上)边距-鼠标与被拖动元素之间的距离
注意:onmousemove应该是在onmousedown发生时进行,不然不需要点击也能拖动了。
用户可能会将拖动层脱出窗口外。
window.onload=function(){
var box=document.getElementById("div");
var disX;
var disY;
document.onmousedown=function(ev){
var oEvent=ev||event;
disX=oEvent.clientX-box.offsetLeft;
disY=oEvent.clientY-box.offsetTop;
document.onmousemove=function(ev){
var oEvent=ev||event;
box.style.left=oEvent.clientX-disX+‘px‘;
box.style.top=oEvent.clientY-disY+‘px‘;
};
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null; //onmouseup又没用了,所以最好清理掉
};
};
}