【JS】原生js实现拖拽和边界限定

原创于 2023-05-11 22:04:17 发布 · 992 阅读

CC 4.0 BY-SA版权

文章标签：

该文章提供了一段JavaScript代码，展示了如何使用原生JS实现一个可拖动的元素，并且在拖动过程中限制其移动范围，确保元素不会超出浏览器窗口的边界。代码主要涉及到鼠标按下、移动和释放事件的绑定，以及利用CSS的绝对定位来更新元素的位置。

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

【JS】原生js实现拖拽和边界限定

废话不多说，直接上代码

<!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>Document</title>
    <style>
        #box{
            width: 100px;
            height: 100px;
            background-color: #0088dd;
            /* 必须开定位 绝对定位*/
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <div id="box"></div>
</body>
<script>
    //拖拽边界判断
    //获取元素
    var box = document.querySelector("#box");

    //绑定鼠标按下事件
    box.onmousedown = function(evt){
        var e = evt || event;

        //offsetX返回鼠标指针相对于目标元素的 x 坐标。
        var offsetX = e.offsetX;
        //offsetY返回鼠标指针相对于目标元素的 y 坐标。
        var offsetY = e.offsetY;

        //绑定鼠标移动事件
        document.onmousemove = function(evt){
            var e = evt || event;
            //pageX/pageY鼠标相对于整个页面的X/Y坐标。
            var x = e.pageX - offsetX;  //div距离浏览器left边框的距离
            var y = e.pageY - offsetY;  //div距离浏览器top边框的距离
 
            if(x < 0){
                x = 0;
            }
            if(y < 0){
                y = 0;
            }

            //window.innerWidth 获取文档显示区的宽度
            var maxLeft = window.innerWidth - box.offsetWidth;
 
            if(x > maxLeft){
                x = maxLeft;
            }

            //window.innerHeight 获取文档显示区的高度
            var maxTop = window.innerHeight - box.offsetHeight;
 
            if(y > maxTop){
                y = maxTop;
            }
 

            box.style.left = x + "px";
            box.style.top = y + "px";
        }
        document.onmouseup = function(){
            document.onmousemove = null;
        }
    }

</script>
</html>