拖拽练习_vue移除document.onmousemove事件-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_51088023/article/details/125929841

该博客详细介绍了如何使用JavaScript实现HTML5中的拖放功能。通过监听鼠标按下、移动和松开事件，动态调整元素位置，实现元素的拖拽效果。同时，文章还讨论了如何防止浏览器默认的拖放行为对功能的影响。

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

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0%;
            padding: 0%;
        }

        #box1 {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
        }
    </style>
    <script>
        window.onload = function () {
            /*
             * 拖拽box1元素 
             *  -拖拽的流程
             *      1.当鼠标在被拖拽元素上按下时，开始拖拽onmousedown
             *      2.当鼠标移动时被拖拽元素跟随鼠标移动onmousemove
             *      3.当鼠标松开时。被拖拽元素固定在当前元素onmouseup
            */
            //获取box1
            var box1 = document.getElementById("box1");
            //为box1绑定一个鼠标按下事件
            //当鼠标在被拖拽元素上按下时，开始拖拽onmousedown
            box1.onmousedown = function (event) {
                event = event || window.event;
                //鼠标在div的偏移量 鼠标.clentX-元素.offsetLeft
                //鼠标在div的偏移量 鼠标.clentY-元素.offsetTop
                var ol = event.clientX - box1.offsetLeft;
                var ot = event.clientY - box1.offsetTop;
                //为document绑定一个鼠标移动事件
                document.onmousemove = function (event) {
                    event = event || window.event;
                    //当鼠标移动时被拖拽元素跟随鼠标移动onmousemove
                    //获取鼠标的相对坐标
                    var left = event.clientX - ol;
                    var top = event.clientY - ot;
                    //设置滚轮的水平和垂直距离
                    var st = document.body.scrollTop || document.documentElement.scrollTop;
                    var sl = document.body.scrollLeft || document.documentElement.scrollLeft;
                    //设置div的偏移量
                    box1.style.left = left + sl + "px";
                    box1.style.top = top + st + "px";

                };
                //为document为绑定一个鼠标松开事件
                document.onmouseup = function () {
                    //当鼠标松开时。被拖拽元素固定在当前元素onmouseup
                    //取消document.onmousemove事件
                    document.onmousemove = null;
                    //取消document.onmouseup事件
                    document.onmouseup = null;
                };
                /**
                 * 当拖拽一个网页中的内容时，浏览器会默认去搜索引擎中搜索内容
                 * 此时会导致拖拽功能的异常，这是浏览器的默认行为
                 * 如果不希望这个行为的发生，则可以通过return false来取消默认行为
                */
                return false;
            };
        };
    </script>
</head>

<body>
    <div id="box1"></div>
</body>

</html>