[Js]拖拽

分析:

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又没用了,所以最好清理掉

        };

    };

}

[Js]拖拽,布布扣,bubuko.com

[Js]拖拽

上一篇:Linux基础命令练习题7.27


下一篇:23个.NET开源项目