Can you help me to do movable window in js-CodePudding

(sorry for my bad english) Hello, I want to do movable window in js: when you stay supported on the window, it moves, and when you release your mouse, the window stops to move. Thank you...

CodePudding user response：

To do this yourself, you need to bind the mousedown event, mousemove event, and mouseup event to your movable object

mousedown = engage moving component state.

mousemove = when item is moving, shift the component's x,y coordinates by mouse motion offsets.

mouseup = disengage the moving component state

This isn't as easy as it sounds, and there are a lot of edge cases. It might be easier to use an existing framework to help manage the complexity.

I found interactjs.io as an option. I have no idea if it's any good, and have not used it myself.

CodePudding user response：

ref: https://www.w3schools.com/howto/howto_js_draggable.asp

Simple solution with comments to help explain whats going on (copy/paste from the link above):

// Make the DIV element draggable:
dragElement(document.getElementById("mydiv"));

function dragElement(elmnt) {
  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
  if (document.getElementById(elmnt.id   "header")) {
    // if present, the header is where you move the DIV from:
    document.getElementById(elmnt.id   "header").onmousedown = dragMouseDown;
  } else {
    // otherwise, move the DIV from anywhere inside the DIV:
    elmnt.onmousedown = dragMouseDown;
  }

  function dragMouseDown(e) {
    e = e || window.event;
    e.preventDefault();
    // get the mouse cursor position at startup:
    pos3 = e.clientX;
    pos4 = e.clientY;
    document.onmouseup = closeDragElement;
    // call a function whenever the cursor moves:
    document.onmousemove = elementDrag;
  }

  function elementDrag(e) {
    e = e || window.event;
    e.preventDefault();
    // calculate the new cursor position:
    pos1 = pos3 - e.clientX;
    pos2 = pos4 - e.clientY;
    pos3 = e.clientX;
    pos4 = e.clientY;
    // set the element's new position:
    elmnt.style.top = (elmnt.offsetTop - pos2)   "px";
    elmnt.style.left = (elmnt.offsetLeft - pos1)   "px";
  }

  function closeDragElement() {
    // stop moving when mouse button is released:
    document.onmouseup = null;
    document.onmousemove = null;
  }
}

#mydiv {
  position: absolute;
  z-index: 9;
  background-color: #f1f1f1;
  border: 1px solid #d3d3d3;
  text-align: center;
}

#mydivheader {
  padding: 10px;
  cursor: move;
  z-index: 10;
  background-color: #2196F3;
  color: #fff;
}

<!-- Draggable DIV -->
<div id="mydiv">
  <!-- Include a header DIV with the same name as the draggable DIV, followed by "header" -->
  <div id="mydivheader">Click here to move</div>
  <p>Move</p>
  <p>this</p>
  <p>DIV</p>
</div>