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

最近我的博客项目中需要用到可移动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,快去试试吧!

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值