鼠标拖曳

2024-03-27 16:08:58

<!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>

码农公寓

相关文章