限制范围的拖拽的简单实现及封装（含磁性吸附）

来源：互联网发布：淘宝发布定制产品编辑：程序博客网时间：2024/05/21 12:03

拖拽的实现及封装：

<body>    <div id="div1" style="width: 100px; height: 100px; background: orange; position: absolute;"></div>    <div id="div2" style="width: 100px; height: 100px; background: olivedrab; position: absolute; top: 200px; left: 200px;"></div>    <script type="text/javascript">        var oDiv1=document.getElementById("div1");        var oDiv2=document.getElementById("div2");        drag(oDiv1);        drag(oDiv2);        function drag(obj){            obj.onmousedown=function(ev){                var ev= ev || event;                var disX=ev.clientX-this.offsetLeft;  //鼠标距离div上、左边缘的距离                var disY=ev.clientY-this.offsetTop;                //设置全局捕获，兼容ie8及以下                if (obj.setCapture) {                    obj.setCapture();                }                document.onmousemove=function(ev){                    var ev= ev || event;                    obj.style.left=ev.clientX-disX+'px';                    obj.style.top=ev.clientY-disY+'px';                }                document.onmouseup=function(){                    document.onmousemove=document.onmouseup=null;                    //释放全局捕获                    if (obj.releaseCapture) {                        obj.releaseCapture();                    }                }                return false;  //图片和选中的文字有拖拽默认行为，这里需要阻止            }        }    </script></body>

限制范围：将拖拽限制在可视区域范围之内

<body>    <div id="div1" style="width: 100px; height: 100px; background: orange; position: absolute;"></div>    <div id="div2" style="width: 100px; height: 100px; background: olivedrab; position: absolute; top: 200px; left: 200px;"></div>    <script type="text/javascript">        var oDiv1=document.getElementById("div1");        var oDiv2=document.getElementById("div2");        drag(oDiv1);        drag(oDiv2);        function drag(obj){            obj.onmousedown=function(ev){                var ev= ev || event;                var disX=ev.clientX-this.offsetLeft;  //鼠标距离div上、左边缘的距离                var disY=ev.clientY-this.offsetTop;                //设置全局捕获，兼容ie8及以下                if (obj.setCapture) {                    obj.setCapture();                }                document.onmousemove=function(ev){                    var ev= ev || event;                    var L=ev.clientX-disX;                    var T=ev.clientY-disY;                    if (L<0) {                        L=0                    }else if(L>document.documentElement.clientWidth-obj.offsetWidth){                        L=document.documentElement.clientWidth-obj.offsetWidth;                    }                    if (T<0) {                        T=0                    }else if(T>document.documentElement.clientHeight-obj.offsetHeight){                        T=document.documentElement.clientHeight-obj.offsetHeight;                    }                    obj.style.left= L +'px';                    obj.style.top= T +'px';                }                document.onmouseup=function(){                    document.onmousemove=document.onmouseup=null;                    //释放全局捕获                    if (obj.releaseCapture) {                        obj.releaseCapture();                    }                }                return false;  //图片和选中的文字有拖拽默认行为，这里需要阻止            }        }    </script></body>

磁性吸附：如在可视区域20px范围内产生吸附
即将：

if (L<0) {    L=0}else if(L>document.documentElement.clientWidth-obj.offsetWidth){    L=document.documentElement.clientWidth-obj.offsetWidth;}if (T<0) {    T=0}else if(T>document.documentElement.clientHeight-obj.offsetHeight){    T=document.documentElement.clientHeight-obj.offsetHeight;}

改为：

if (L<20) {    L=0}else if(L>document.documentElement.clientWidth-obj.offsetWidth-20){    L=document.documentElement.clientWidth-obj.offsetWidth;}if (T<20) {    T=0}else if(T>document.documentElement.clientHeight-obj.offsetHeight-20){    T=document.documentElement.clientHeight-obj.offsetHeight;}

0 0