Javascript 拖放后如何释放对象

Question

我在 https://codepen.io/islempenywis/pen/VXqJVY 上找到了 javascript Drag/Drop 这个有趣的例子。

但是，它有一个问题，如果你点击“TODO Item”矩形的顶部，在拖动（MouseDown + Drag + MouseUp）之后是不可能放下这个项目的；它粘在光标上并随之移动：/

MouseUp 是一个简单的功能，没什么特别的:

function onMouseUp(e, item) {
  isMouseDown = false;
  item.style.backgroundColor = "#F44336";
}

因为我可以用 Chrome、Edge 和 Firefox 复制它，所以我猜测这是一个代码问题，但无法找出那是什么。

请帮忙。地理位置

Answer 1

onMouseMove 事件处理程序计算错误：

item.style.top = e.clientY + mouseOffset.y + "px";

当您在按住“TODO”项的同时移动鼠标时，整个元素的顶部（包括其边距）将放置在您单击的视口 (e.clientY) 的垂直坐标上，并且调整到您单击的元素 (+ mouseOffset.y) 中中的点，因此该元素会随着光标移动。但它忽略了它的保证金。如果你注意的话，当你点击并移动项目时，它会稍微向下移动。这些是 10 个像素的边距。当您单击顶部时，该元素将稍微向下放置光标，光标将丢失它，并且它会被窃听。要修复，您必须在计算中减去边距。

item.style.top = e.clientY - 10 + mouseOffset.y + "px";

Javascript 拖放后如何释放对象

How to release object after drag-drop in Javascript

javascript

drag-and-drop