首页 > 其他分享> > 拖动事件的实现 js

拖动事件的实现 js

2022-07-05 20:31:14 作者：互联网

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            #box{
                height: 300px;
                width: 300px;
                background-color: aqua;
                position: absolute;
                left: 100px;
                top: 50px;
            }
        </style>
    </head>
    <body style="position: relative;height: 100%;">
        <div id="box"></div>
        <script>
            let box = document.querySelector('#box') //拿到box元素
            box.onmousedown = function(e){ //鼠标按下事件
                console.log(e.pageX)  //pageX是整个页面的点击的地方
                console.log(e.target.offsetLeft)//offsetLeft 相对于当前div的左边或者上边的偏移量
                let x =  e.pageX - e.target.offsetLeft //获取div中点击的地方(左边)
                let y =  e.pageY - e.target.offsetTop  //获取div中点击的地方(顶部)
                box.onmousemove =function(e){  //鼠标移动事件
                    console.log(111,e.pageX,e.pageY)
                    box.style.left = e.pageX - x+'px' //div的最左边位置  只要移动就获取最新的位置 赋值给left
                    box.style.top = e.pageY - y+'px'    //div的最顶部位置  只要移动就获取最新的位置 赋值给top
                } 
                box.onmouseup = function(){//鼠标松开 删除移动事件
                    this.onmousemove = null
                }
                console.log(x,y)
            }
        </script>
    </body>
</html>

可随意拖动

标签：box,console,log,拖动,top,js,事件,pageX,div
来源： https://www.cnblogs.com/xm666/p/16448521.html