[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]拖拽,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。