封装 拖拽 核心 js 代码

上代码 Drag.js 文件

class Drag {
  constructor(id) {
    this.disX = 0;
    this.disY = 0;
    this.box = document.getElementById(id);
    this.m = this.move.bind(this);
    this.u = this.up.bind(this);
  };
  init() {
    this.box.addEventListener("mousedown", this.down.bind(this));
  };
  down(ev) {
    ev.preventDefault(); // 阻止默认行为(防止拖拽过程中可能选中文字，"box"错误跟随的尴尬)
    this.disX = ev.pageX - this.box.offsetLeft;
    this.disY = ev.pageY - this.box.offsetTop;
    document.addEventListener("mousemove", this.m);
    document.addEventListener("mouseup", this.u);
  };
  move(ev) {
    this.box.style.left = ev.pageX - this.disX + "px";
    this.box.style.top = ev.pageY - this.disY + "px";
    // 防止拖出窗口
    if (this.box.offsetLeft <= 0) {
      this.box.style.left = 0 + "px"
    };
    if (this.box.offsetLeft >= window.innerWidth - this.box.offsetWidth) {
      this.box.style.left = window.innerWidth - this.box.offsetWidth + "px"
    };
    if (this.box.offsetTop <= 0) {
      this.box.style.top = 0 + "px"
    };
    if (this.box.offsetTop >= window.innerHeight - this.box.offsetHeight) {
      this.box.style.top = window.innerHeight - this.box.offsetHeight + "px"
    };
  };
  up() {
    document.removeEventListener("mousemove", this.m);
    document.removeEventListener("mouseup", this.u);
  };
};

export default Drag;

/* 
　使用举例： 
　　import Drag from "./Drag"

　　let xxx = new Drag("box");
　　xxx.init(); 
*/