原生js通过类实现拖拽

  class Drag{
    constructor(dom){
        this.isDrag=false; //拖拽开关
        this.boxX=null; //鼠标点击时盒子初始坐标
        this.boxY=null;
        this.mouseX=null; //鼠标点击市鼠标初始坐标
        this.mouseY=null;
        this.X=null; //鼠标在盒子上的偏移值
        this.Y=null;
      dom.addEventListener('mousedown',function (e) {
              //    拖拽开始
              this.isDrag=true;
              // 盒子坐标
              this.boxX=dom.offsetLeft;
              this.boxY=dom.offsetTop;
              //  鼠标坐标
              this.mouseX=e.clientX;
              this.mouseY=e.clientY;
              //鼠标在盒子上的坐标偏移
              this.X = this.mouseX - this.boxX;
              this.Y = this.mouseY - this.boxY;
      });
      dom.addEventListener('mousemove',function (e) {
          if(this.isDrag){
              //当前鼠标坐标
              let currentX=e.clientX;
              let currentY=e.clientY;
              //根据鼠标在盒子上的偏移位置设置盒子具体位置
              dom.style.left=currentX-this.X + 'px';
              dom.style.top=currentY-this.Y + 'px';
          }
      });
      dom.addEventListener('mouseup',function (e) {
          // 鼠标抬起，拖拽关闭
          this.isDrag=false;
      });
      dom.addEventListener('mouseleave',function () {
          // 鼠标抬起，拖拽关闭
          this.isDrag=false;
      })
    }
}
//调用
let drag = new Drag(dom);