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

大致分为三个步骤:

  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

你可能感兴趣的:(javascript学习路程)