實現一個div的拖拽效果

實現思路：

1. 滑鼠按下開始拖拽
2. 記錄摁下滑鼠時的滑鼠位置以及元素位置
3. 拖動滑鼠記下當前滑鼠的位置
4. 滑鼠當前位置-摁下時滑鼠位置= 滑鼠移動距離
5. 元素位置= 滑鼠移動距離+滑鼠摁下時元素的位置

           class Drag {
               //構造函數
               constructor(el) {
                   this.el = el;
                   //滑鼠摁下時的元素位置
                   this.startOffset = {};
                   //滑鼠摁下時的滑鼠位置
                   this.startPoint = {};
                   let move = (e) => {
                       this.move(e);
                   };
                   let end = (e) => {
                       document.removeEventListener("mousemove", move);
                       document.removeEventListener("mouseup", end);
                   };
                   el.addEventListener("mousedown", (e) => {
                       this.start(e);
                       document.addEventListener("mousemove", move);
                       document.addEventListener("mouseup", end);
                   })
               }
               //摁下時的處理函數
               start(e) {
                   let { el } = this;
                   this.startOffset = {
                       x: el.offsetLeft,
                       y: el.offsetTop
                   }
                   this.startPoint = {
                       x: e.clientX,
                       y: e.clientY
                   }
               }
               //滑鼠移動時的處理函數
               move(e) {
                   let { el, startOffset, startPoint } = this;
                   let newPoint = {
                       x: e.clientX,
                       y: e.clientY
                   }
                   let dis = {
                       x: newPoint.x - startPoint.x,
                       y: newPoint.y - startPoint.y,
                   }
                   el.style.left = dis.x + startOffset.x + "px";
                   el.style.top = dis.y + startOffset.y + "px";
               }
           }
   
           (function () {
               let box = document.querySelector("#box");
               let dragbox = new Drag(box);
           })()