The source code

// The source code is very simple, not much introduction
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;
Copy the code

Register an NPM account

• To develop an NPM package, you need an NPM account to publish the NPM package to the NPM’s managed server
• Registration address: npmjs.org
• After successful registration must be verified in the mailbox, otherwise conference 403 reported an error

The development of NPM package

1.npm init

Go to the folder, execute NPM init, and enter as prompted

2. Write code

Write structural directories in folders based on the project situation. The drag-and-drop element I’m implementing here is encapsulated as an object, so I only need this one JS.

3.npm adduser

Input user information, pay attention to the NPM source, if it is taobao mirror source to modify

4.npm publish

If the package name fails, 1. Change the package name. 2. Failed to verify in the mailbox after successful registration.

After success, you can see the package information in your NPM

5. Update the NPM package

1. Update the version

The easiest way to do this is simply to change package.json to version; Alternatively, the command: NPM version 1.0.1 will also work

2. Release the version

To update the NPM package, run the NPM adduser command. NPM can publish