在屏幕可视范围内拖动盒子，边界值就是屏幕大小

最新推荐文章于 2022-04-02 00:05:17 发布

Velocityy

最新推荐文章于 2022-04-02 00:05:17 发布

阅读量208

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/Velocityy/article/details/103919175

版权

JavaScript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

这篇博客探讨了如何使用JavaScript实现拖动盒子的功能，确保在屏幕可视范围内移动，边界值设定为屏幕的尺寸。

摘要由CSDN通过智能技术生成

如题：虽然这也不满足我的需求，还是先贴出来

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

<head>

    <meta charset="UTF-8">
    <title>拖拽</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        #box {
            position: absolute;
            width: 200px;
            height: 200px;
            background: red;
        }
    </style>
</head>

<body>
    <div id="box"></div>
    <script>
        function move() {
            // 获取元素和初始值
            var oBox = document.getElementById('box'),
                disX = 0,
                disY = 0;
            // 获取浏览器可见区域宽高，div宽高
            var browserWidth = document.documentElement.clientWidth,
                browserHeight = document.documentElement.clientHeight,
                boxWidth = document.getElementById('box').offsetWidth,
                boxHeight = document.getElementById('box').offsetHeight;
            // 容器鼠标按下事件
            oBox.onmousedown = function(e) {
                var e = e || window.event;
                // 鼠标相对于div左侧位置
                disX = e.clientX - this.offsetLeft;
                disY = e.clientY - this.offsetTop;
                document.onmousemove = function(e) {
                    var e = e || window.event;
                    oBox.style.left = (e.clientX - disX) + 'px';
                    if ((e.clientX - disX) <= 0) {
                        oBox.style.left = 0;
                    } else if ((boxWidth - disX + e.clientX) >= browserWidth) {
                        oBox.style.left = browserWidth - boxWidth + "px";
                    }
                    oBox.style.top = (e.clientY - disY) + 'px';
                    if ((e.clientY - disY) <= 0) {
                        oBox.style.top = 0;
                    } else if ((boxHeight - disY + e.clientY) >= browserHeight) {
                        oBox.style.top = browserHeight - boxHeight + "px";
                    }
                };

                document.onmouseup = function() {
                    document.onmousemove = null;
                    document.onmouseup = null;
                };
                return false;
            };
        }
        move();
    </script>
</body>

</html>