拖拽盒子，让盒子随着鼠标移动而移动

最新推荐文章于 2024-01-08 15:33:29 发布

进阶的小牛

最新推荐文章于 2024-01-08 15:33:29 发布

阅读量993

点赞数

分类专栏： js

本文链接：https://blog.youkuaiyun.com/datuzidppd5556/article/details/100056977

版权

js 专栏收录该内容

26 篇文章

订阅专栏

拖拽盒子，让盒子随着鼠标移动而移动

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            padding: 0px;
            margin: 0px;
        }

        #box {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            top: 0px;
            left: 0px;
        }
    </style>
</head>

<body>
    <div id="box">asdfghj</div>
    <script>
        var box = document.getElementById("box");

        drag(box);

        function drag(obj) {
            document.onmousedown = function (ev) {
                // return false;
                var ev = window.even || ev;
                // ev.clientX:从鼠标到body的距离，box.offsetLeft：conbox的边框到body的距离
                var x = ev.clientX - obj.offsetLeft;//box到鼠标点击位置的水平距离
                var y = ev.clientY - obj.offsetTop;
                document.onmousemove = function (ev) {
                    var ev = window.even || ev;
                    var le = ev.clientX - x;
                    var to = ev.clientY - y;
                    if (le < 0) {
                        le = 0;
                    }
                    if (le > document.documentElement.clientWidth - obj.offsetWidth) {
                        le = document.documentElement.clientWidth - obj.offsetWidth;
                    }
                    if (to < 0) {
                        to = 0;
                    }
                    if (to > document.documentElement.clientHeight - obj.offsetHeight) {
                        le = document.documentElement.clientHeight - obj.offsetHeight;
                    }
                    obj.style.left = le + "px";
                    obj.style.top = to + "px";
                    console.log(le, to)
                }
                document.onmouseup = function () {
                    document.onmousemove = null;
                }
                return false;
            }

        }



    </script>
</body>

</html>

注意：clientX：获取当前鼠标的位置，相对于屏幕。
pageX: 获取当前鼠标的位置，相对于页面。
clientWidth : 元素的可视宽度：width+左右padding
offsetWidth: 获取元素的占位宽度：width+padding+border;
offsetTop: 当前元素的顶部到定位父元素的距离，没有定位父元素，就是到body的距离。
scrollTop: 获取页面被卷去的高度，就是滚轮与页面上部的距离。
scrollWidth: 获取元素实际内容的宽度。