可拖动效果在 Javascript 中不起作用

Question

I have the follow code to make the div to become draggable:

 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>

I am not sure why, this code doesn't work properly as I expected.

Sometimes, when I just hover the div , it position will also change and that is what I don't expect. I checked the code for several times, but I didn't define the mouseover effect.

Could anyone tell me what I did wrong and how to fix it?

Thanks for any responds!

Answer 1

You have to remove the event listener from the div, not the window:

I also centered the div when the user is dragging it, so the mouse has no chance to leave the 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>

Answer 2

There were two issues,

1. You were removing the event lister from the window, not on the div.
2. You need to consider the offset values to correctly position the div when moving.

 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>

Answer 3

 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>