JS实现限制可移动div的移动范围

最新推荐文章于 2024-01-12 16:48:52 发布

zlei不想写bug

最新推荐文章于 2024-01-12 16:48:52 发布

阅读量630

点赞数

分类专栏：笔记文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_66968367/article/details/128875308

版权

笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

最近我的博客项目中需要用到可移动div框，虽然让div移动很简单，监听鼠标的坐标即可，但是如何限制可移动div的移动范围呢？这个问题困扰了我很久，我想了很久才有了解决方案

思路

当我们将div移动到最上方并且起始坐标-当前坐标>0时，才将div顶部的距离限制（top:0px），其它方向同理。

啥，听不懂？没关系，会CV大法就行，下面我将已封装好的代码列出：

//移动盒子函数
//obj:对象，例如：document.getElementById("box")
//moveX/moveY:存储在全局变量的x/y坐标
function moveBox(obj, moveX, moveY) {
    var box = obj;
    var left = box.offsetLeft;
    var right = box.getBoundingClientRect().right - window.innerWidth;
    var top = box.offsetTop;
    var bottom = box.getBoundingClientRect().bottom - window.innerHeight;
    var intX = event.clientX - moveX;
    var intY = event.clientY - moveY;
    intX = left < 20 && moveX - event.offsetX > 0 ? 0 : intX;
    intX = right > -5 && moveX - event.offsetX < 0 ? window.innerWidth - box.clientWidth : intX;
    intY = top <= 0 && moveY - event.offsetY > 0 ? 0 : intY;
    intY = bottom > -5 && moveY - event.offsetY < 0 ? window.innerHeight - box.clientHeight : intY;
    box.style.left = intX + "px";
    box.style.top = intY + "px";
}

不会用？没关系，下面给你提供一个示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS实现限制可移动div的移动范围</title>
    <style>
        #box {
            width: 300px;
            height: 300px;
            background-color: red;
            position: absolute;
            top: 5px;
            left: 30px;
            padding: 20px;
        }
    </style>
</head>

<body>
    <!-- 可移动盒子 -->
    <div id="box"></div>
    
    <script type="text/javascript">
        var X;   //鼠标起始X坐标
        var Y;   //鼠标起始Y坐标
        var box = document.getElementById("box");   //可移动div对象
        //移动盒子函数
        //obj:对象，例如：document.getElementById("box")
        //moveX/moveY:存储在全局变量的x/y坐标
        function moveBox(obj, moveX, moveY) {
            var box = obj;
            var left = box.offsetLeft;
            var right = box.getBoundingClientRect().right - window.innerWidth;
            var top = box.offsetTop;
            var bottom = box.getBoundingClientRect().bottom - window.innerHeight;
            var intX = event.clientX - moveX;
            var intY = event.clientY - moveY;
            intX = left < 20 && moveX - event.offsetX > 0 ? 0 : intX;
            intX = right > -5 && moveX - event.offsetX < 0 ? window.innerWidth - box.clientWidth : intX;
            intY = top <= 0 && moveY - event.offsetY > 0 ? 0 : intY;
            intY = bottom > -5 && moveY - event.offsetY < 0 ? window.innerHeight - box.clientHeight : intY;
            box.style.left = intX + "px";
            box.style.top = intY + "px";
        }

        //注册事件
        box.addEventListener("mousedown", function () {
            Y = event.offsetY;
            X = event.offsetX;
            box.onmousemove = function () {
                moveBox(document.getElementById("box"), X, Y);
            };
        });
        //鼠标抬起销毁事件
        box.addEventListener("mouseup", function () {
            document.body.onmousemove = null;
            X = void 0;
            Y = void 0;
        });
        //鼠标离开可移动div也要销毁移动事件，否则会出bug
        box.addEventListener("mouseleave", function () {
            document.body.onmousemove = null;
            X = void 0;
            Y = void 0;
        })
    </script>
</body>

</html>

OK，快去试试吧！