原生JS驱动DOM 实现DIV拖拽效果

在建立的HTML 页面中 鼠标 拖拽 盒子 于任意位置 拖拽
可知 我们需要使用到 鼠标事件 div 定位 问题 页面中 鼠标坐标距离上 左 距离的计算

首先第一步 先实现 DIV 于页面中

         *{
            padding:0;
            margin:0;
          }
         #app{
             background: #ccc;
             width: 200px;
             height: 200px;
             position: absolute;
           }

代码格式如上 因为要使用绝对定位 来确定div 位置 所以提前声明

写之前需要声明一下 与之有关的鼠标事件
鼠标点击 以及鼠标点击 之后 移动 移动完之后 鼠标移开
分别是三个时间 mousedown mousemove mouseup
可以检测这三个事件的先后顺序如下

结果如下

由此可知 顺序为 mousedown -> mousemove -> mouseup
具体操作需写在mouseover事件里

在script 区域中 代码如下

   <script>
           var app = document.getElementById('app');
           window.onmouseover = function () {
              app.style.left =  e.pageX  +'px'
              app.style.top = e.pageY  +'px'
           }   
   </script>

虽然这样写 已经基本完成了 但是 有个问题 div 总是出现在鼠标右下角
如果我想 鼠标放在盒子里面 又要如下操作
整体 声明 x y 变量 便于计算 盒子 离上 左 的 绝对距离
声明一个flag 为 false

 var app = document.getElementById('app');
         let Move = false;  var x   , y
         window.onmouseover = function (){
              console.log('over')
         } 
         
         window.onmouseup  = function(){
             console.log('up')
             Move = false

         }

         window.onmousedown = function(e){
             console.log('down')
             x = e.pageX - app.offsetLeft
             y = e.pageY - app.offsetTop
             Move = true

         }

         window.onmousemove = function(e){
             console.log('move ')
             e.preventDefault();
             
             if( Move ) {
                console.log('move')
                app.style.left =  e.pageX - x +'px'
                app.style.top = e.pageY  - y +'px'
             }
         }
      

在down 事件内 改 move 为 true 并记录下 鼠标 距离盒子的距离
move 事件中 实时记录 距离
如此 up 事件后 改 move 为 false 关闭此次事件