(perdón por mi mal inglés) Hola, quiero hacer una ventana móvil en js: cuando permaneces apoyado en la ventana, se mueve, y cuando sueltas el mouse, la ventana deja de moverse. Gracias...
Para hacer esto usted mismo, debe vincular el evento mousedown , mousemove event y mouseup event a su objeto móvil
mousedown = activa el estado del componente en movimiento.
mousemove = cuando el elemento se mueve, cambia las coordenadas x, y del componente según las compensaciones de movimiento del mouse.
mouseup = desactivar el estado del componente en movimiento
Esto no es tan fácil como parece, y hay muchos casos extremos. Podría ser más fácil usar un marco existente para ayudar a administrar la complejidad.
Encontré interactjs.io como una opción. No tengo idea de si es bueno, y no lo he usado yo mismo.
referencia: https://www.w3schools.com/howto/howto_js_draggable.asp
Solución simple con comentarios para ayudar a explicar lo que está pasando (copiar/pegar desde el enlace de arriba):
// 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>