Dom应用(六)——拖拽正方形需求要求鼠标按下正方形随着鼠标动鼠标松开，正方形固定在松开位置步骤onmousedown时

需求

要求鼠标按下正方形随着鼠标动
鼠标松开，正方形固定在松开位置

步骤

onmousedown时获取鼠标点击位置距离正方形的距离
doucument.onmousemove时，设置oDiv的left和top
onmouseup时，清除onmousedown

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        body{
            position: relative;
        }
        div{
            height:200px;
            width: 200px;
            background: pink;
            position: absolute;
            top: 0px;
            left: 0px;
            cursor: move;
        }
    </style>


</head>
<body>
    <div></div>
    <script>
    var oDiv = document.getElementsByTagName("div")[0];
    var x ;
    var y;
    
    oDiv.onmousedown = function(e){
      x = e.clientX - oDiv.offsetLeft;
      y = e.clientY - oDiv.offsetTop;
      console.log("按下鼠标")

     // 在按下鼠标时，触发移动鼠标事件，如果鼠标移动不是在按下鼠标函数体内，那么将会产生松开鼠标再也无法按下
      document.onmousemove = function(event){
        oDiv.style.left = event.clientX - x + "px";
        oDiv.style.top = event.clientY - y + "px";
     }
    }
    
   oDiv.onmouseup = function(){
        document.onmousemove = null;
        console.log("松开鼠标")
    }

   </script>
</body>
</html>