拖动事件的实现 js

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