源码

// 源码很简单，不多介绍
function DragElement(root) {
  this.dom = root;
}

DragElement.prototype = {
  constructor: DragElement,

  mouseDownListener(ev) {
    ev.preventDefault();

    let currentLeft = this.dom.offsetLeft;
    let currentTop = this.dom.offsetTop;

    let currentPageX = ev.pageX;
    let currentPageY = ev.pageY;

    let move = (ev) => {
      console.log('move')
      let left = ev.pageX - currentPageX + currentLeft;
      let top = ev.pageY - currentPageY + currentTop;

      left < 0 && (left = 0);
      top < 0 && (top = 0);

      let maxLeft = this.dom.parentElement.clientWidth - this.dom.clientWidth;
      let maxTop = this.dom.parentElement.clientHeight - this.dom.clientHeight;

      left > maxLeft && (left = maxLeft);
      top > maxTop && (top = maxTop);

      this.dom.style.left = left + "px";
      this.dom.style.top = top + "px";
    };
    let up = () => {
      document.removeEventListener("mousemove", move, false);
      document.removeEventListener("mouseup", up, false);
    };

    document.addEventListener("mousemove", move, false);
    document.addEventListener("mouseup", up, false);
  },

  bind(currentEle) {
    currentEle.setAttribute("style", "cursor: move;");

    let mouseDownListenerBack = (e) => {
      this.mouseDownListener(e)
    }

    currentEle.addEventListener(
      "mousedown",
      mouseDownListenerBack,
      false
    );

    return mouseDownListenerBack
  },

  unBind(currentEle, listenerBack) {
    currentEle.setAttribute("style", "cursor: default;");

    currentEle.removeEventListener(
      "mousedown",
      listenerBack,
      false
    );
  },
};

export default DragElement;