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

最新推荐文章于 2024-02-04 09:16:54 发布

原创最新推荐文章于 2024-02-04 09:16:54 发布 · 878 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#拖拽-封装-磁性吸附

JavaScript 专栏收录该内容

33 篇文章

订阅专栏

本文介绍如何实现拖拽操作，并将其限制在指定的可视区域内，同时添加了20px范围内的磁性吸附效果，使得元素在接近边界时能够自动吸附，提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

拖拽的实现及封装：

<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;
}