Tengo el siguiente código para hacer que el div se pueda arrastrar:
let div = document.querySelector('div') div.onmousedown = function() { div.addEventListener('mousemove', move, true) } window.onmouseup = function() { window.removeEventListener('mousemove', move, true) } function move(e) { this.style.position = 'absolute' this.style.top = e.clientY + 'px' this.style.left = e.clientX + 'px' } div { background: red; width: 100px; height: 100px; } <div></div>No estoy seguro de por qué, este código no funciona correctamente como esperaba.
A veces, cuando solo paso el div , su posición también cambiará y eso es lo que no espero. Revisé el código varias veces, pero no definí el efecto del mouseover .
¿Alguien podría decirme qué hice mal y cómo solucionarlo?
¡Gracias por cualquier respuesta!
Debe eliminar el detector de eventos del div, no de la ventana:
También centré el div cuando el usuario lo arrastra, por lo que el mouse no tiene posibilidad de salir del div.
let div = document.querySelector('div'); function move(e) { this.style.position = 'absolute' this.style.top = e.clientY - (this.offsetHeight / 2) + 'px' this.style.left = e.clientX - (this.offsetWidth / 2) + 'px' } div.addEventListener('mousedown', function() { this.addEventListener('mousemove', move, true); }); window.addEventListener('mouseup', function() { div.removeEventListener('mousemove', move, true); }); div { background: red; width: 100px; height: 100px; } <div></div>Había dos problemas,
let div = document.querySelector('div') let offsetX = ""; let offsetY = ""; div.onmousedown = function(e) { var domRect = this.getBoundingClientRect(); offsetX = e.clientX - domRect.left; offsetY = e.clientY - domRect.top; div.addEventListener('mousemove', move, true) } window.onmouseup = function() { div.removeEventListener('mousemove', move, true) } function move(e) { this.style.position = 'absolute' this.style.top = e.clientY - offsetY + 'px' this.style.left = e.clientX - offsetX + 'px' } #my-div { background: red; width: 100px; height: 100px; } <div id="my-div"></div> dragElement(document.getElementById("mydiv")); function dragElement(elmnt) { var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0; if (document.getElementById(elmnt.id + "header")) { document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown; } else { elmnt.onmousedown = dragMouseDown; } function dragMouseDown(e) { e = e || window.event; e.preventDefault(); pos3 = e.clientX; pos4 = e.clientY; document.onmouseup = closeDragElement; document.onmousemove = elementDrag; } function elementDrag(e) { e = e || window.event; e.preventDefault(); pos1 = pos3 - e.clientX; pos2 = pos4 - e.clientY; pos3 = e.clientX; pos4 = e.clientY; elmnt.style.top = (elmnt.offsetTop - pos2) + "px"; elmnt.style.left = (elmnt.offsetLeft - pos1) + "px"; } function closeDragElement() { document.onmouseup = null; document.onmousemove = null; } } #mydiv { position: absolute; z-index: 9; background-color: #f1f1f1; text-align: center; border: 1px solid #d3d3d3; } #mydivheader { height: 100px; width: 100px; cursor: move; z-index: 10; background-color: #2196F3; color: #fff; } <h1>Draggable DIV Element</h1> <div id="mydiv"> <div id="mydivheader"></div> </div>