使用JS实现拖动```JavasCript```

<!DOCTYPE html>
<html>
<head>
    <title>drop</title>
    <style type="text/css">
        .block{
            width:200px;
            height:200px;
            background-color: orange;
            position:absolute;
        }
    </style>
</head>
<body>
    <div class="block"></div>
    <script type="text/javascript">
        var block=document.querySelector(".block");
        var clicked=false;      //用来标识鼠标是否按住要拖动的元素
        var initialX;       //用来记录起始的横坐标（相对于屏幕）
        var initialY;       //用来记录起始的纵坐标（相对于屏幕）
        var offsetLeft;     //用来记录起始的横坐标（相对于最近的使用position的父元素）
        var offsetTop;      //用来记录起始的纵坐标（相对于最近的使用position的父元素）
        block.addEventListener("mousedown",function(event){     //当在元素上按下鼠标时，将clicked置为true，并进行初始化
            clicked=true;
            initialX=event.clientX;
            initialY=event.clientY;
            offsetTop=block.offsetTop;
            offsetLeft=block.offsetLeft;
        });
        document.documentElement.addEventListener("mouseup",function(){//当松开鼠标时，将clicked置为false(事件函数绑定在html上防止鼠标移动过快时，在block外触发事件)
            clicked=false;
        })
        document.documentElement.addEventListener("mousemove",function(event){     //当鼠标在按住的状态下移动时，会根据鼠标当前的位置计算出元素的位置(事件函数绑定在html上）
            if(clicked){
                var curTop=offsetTop+event.clientY-initialY;
                var curLeft=offsetLeft+event.clientX-initialX;
                block.setAttribute("style",`top:${curTop}px;left:${curLeft}px`);    //使用setAttribute的方法改变CSS样式
                // block.style.top=curTop+"px";                                     //使用style的方法改变CSS样式
                // block.style.left=curLeft+"px";
            }
        })
    </script>
</body>
</html>