源码

// 源码很简单，不多介绍
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;

注册npm账号

• 开发一个npm包，需要一个npm账号，将npm包发布到npm的托管服务器
• 注册地址：http://npmjs.org
• 注册成功后一定要在邮箱里验证一下，不然发布会403报错

开发npm包

1.npm init

2.编写代码

3.npm adduser

4.npm publish

5.更新npm包

1.更新版本号

2.发布版本