鼠标拖曳

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: #f00;
            position: absolute;
        }
    </style>
</head>
<body>
    <div class="box"></div>

    <script>
        var oBox = document.querySelector('.box') ;

        // 拖拽
            // 鼠标按下
                // 获取鼠标距离盒子的位置
            // 鼠标移动

            // 鼠标抬起

            oBox.onmousedown = function(e){
                var e = event || e ; 
                var gapx = e.x - oBox.offsetLeft ; 
                var gapy = e.y - oBox.offsetTop ;

                document.onmousemove = function(e) {
                    var e = event || e ; 
                    var x = e.x - gapx; 
                    var y = e.y - gapy ;

                    oBox.style.cssText =`left:${x}px;top:${y}px`
                }
            }


            document.onmouseup = function() {
                document.onmousemove = null
                
            }
        
    </script>
</body>
</html>
 
posted @ 2021-04-14 19:34  干饭吧  阅读(27)  评论(0编辑  收藏  举报