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

Question

我有以下代码使 div 成为可拖动的:

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>

我不确定为什么，这段代码没有像我预期的那样正常工作。

有时，当我将鼠标悬停在 div 上时，它的位置也会发生变化，这是我没有预料到的。代码查了好几遍，都没有定义mouseover效果

谁能告诉我我做错了什么以及如何解决？

感谢您的任何回复!

Answer 1

你必须从 div 中移除事件监听器，而不是窗口:

我还在用户拖动时将 div 居中，所以鼠标没有机会离开 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>