js拖拽盒子

最新推荐文章于 2024-08-07 10:55:23 发布

六月~

最新推荐文章于 2024-08-07 10:55:23 发布

阅读量194

点赞数 1

文章标签：拖拽盒子 javaScript js 六月~

本文链接：https://blog.csdn.net/qq_42890169/article/details/94436680

版权

思路

按下 => 拖拽 => 抬起就像戴眼镜的过程从手碰到眼镜 =>移动到眼睛上=>戴好手就离开
按下 onmousedown 事件，其中 event | e 时间对象内会有我们需要到的属性，根据鼠标点击的位置距离浏览器的距离减去盒子距离浏览器的距离得到的就是我们在移动过程中不会发生改变的那一部分（图片中的绿色部分）
总而言之第二部分要求出：绿色部分的宽度以及对应的高
按下之后开始移动了移动时需要得到的就是盒子距离浏览器的距离通过鼠标点击的位置距离浏览器的距离减去上一步求出来的鼠标相对于红色容器的距离得到的就是我们需要的盒子的定位距离
最重要的就是在鼠标抬起之后需要清楚移动事件不然就会发生你已经没有按着红色容器了，而它仍然在跟着鼠标动

图示

根据图片理解代码

代码块

<!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>
        .wrap {
            width: 200px;
            height: 200px;
            background: red;
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>
</head>

<body>
    <div class="wrap"></div>

    <script>
        const wrap = document.getElementsByClassName('wrap')[0];  // 获取节点
        wrap.onmousedown = function (e) {     //绑定 鼠标按下事件
            var wrapX = e.clientX - wrap.offsetLeft;  
            var wrapY = e.clientY - wrap.offsetTop;
            document.onmousemove = function (e) {  //鼠标移动事件
                console.log(wrapX, wrapY)
                let left = e.clientX - wrapX;
                let top = e.clientY - wrapY;
                wrap.style.left = left + "px";
                wrap.style.top = top + "px";
                document.onmouseup = function () {
                    document.onmousemove = null   //清空移动事件  可以尝试注释自己看看效果
                }
            }
        }


    </script>
</body>

</html>

** 最后感谢您的观看学习，希望会给你带来不一样的收获**