如何在Javascript中拖放后释放对象

Question

我在https://codepen.io/islempenywis/pen/VXqJVY上找到了这个有趣的javascript拖放示例。

然而，有一个问题，如果你点击顶部的"待办事项"矩形，在拖动(鼠标向下+拖动+鼠标向上)之后，不可能放下这个项目;它会跟随光标移动:/

MouseUp是一个简单的函数，没有什么特别的:

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

因为我可以在Chrome, Edge和Firefox上复制它，我猜这是一个代码问题，但无法找出那将是什么。

请帮助。Geo

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";