JavaScript ---鼠标拖拽元素问题总结

淩亂°似流年 2023-05-21 08:41 23阅读 0赞

大致分为三个步骤：

1.  鼠标摁下 onmousedown
2.  鼠标移动 onmousemove
3.  鼠标抬起 onmouseup

**注意的一点是 onmousemove事件和onmouseup事件是在onmousedown事件里面的**

## 代码如下（不支持IE8及以下浏览器）：代码一 ##

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            body { 
                height: 3000px;
            }
            
            #box1 { 
                width: 100px;
                height: 100px;
                background-color: #bbffaa;
                position: absolute;
                margin-left: 100px;
                z-index: 33;
            }
            
            #box2 { 
                width: 100px;
                height: 100px;
                background-color: red;
                position: absolute;
                top: 300px;
                left: 300px;
            }
        </style>
        <script>
            window.onload = function() { 
    
                var box1 = document.getElementById("box1");
                dary(box1);
                dary(box2);
            };
    
            function dary(obj) { 
                // 为box设置鼠标按下事件 
                obj.onmousedown = function(event) { 
    
                    // 解决 event兼容性
                    event = event || window.event;
    
                    //元素上偏移量 = 鼠标.clientY-元素。offsetTop +元素的上外边距 
                    //元素左偏移量 = 鼠标.clientX-元素。offsetleft +元素的下外边距
                    var ot = event.pageY - obj.offsetTop + parseInt(getComputedStyle(obj, null)["margin-top"]);
                    var ol = event.pageX - obj.offsetLeft + parseInt(getComputedStyle(obj, null)["margin-left"]);
    
                    // 设置鼠标在box上的移动事件
                    document.onmousemove = function(event) { 
                        event = event || window.event;
                        // 获取鼠标的位置坐标
                        var top = event.pageY - ot;
                        var left = event.pageX - ol;
                        // 设置元素的位置
                        obj.style.top = top + "px";
                        obj.style.left = left + "px";
                    };
                    // 设置鼠标在box上的抬起事件
                    document.onmouseup = function() { 
                        // 当鼠标抬起时，取消onmousemove事件
                        document.onmousemove = null;
                        // 当鼠标抬起时，取消onmouseup事件
                        document.onmouseup = null;
    
                    };
    
                    /* 当我们拖拽一个网页中的内容时，浏览器会默认去搜索引擎汇总的搜索内容， 此时会导致拖拽功能的异常，这个是浏览器提供的默认行为， 如果不希望发生这个行为 ，则可以通过return false来取消默认行为 该方法解决对IE8及以下浏览器 不适用， 其他都好使 */
                    return false;
                }
            };
        </script>
    </head>
    
    <body>
        <p>asdfasd</p>
        <div id="box1"></div>
        <div id="box2"></div>
    
    </body>
    
    </html>

--------------------

愿你的坚持终有收获。

[个人博客网站 没事可以来逛逛https://aqingya.cn][_https_aqingya.cn]

[_https_aqingya.cn]: https://aqingya.cn