HTML 5 Drag Drop - 获取被拖动元素的放置位置

Question

我正在尝试实现一个小部件，您可以在其中将元素拖到容器中。 我想在拖放时获取拖动元素的左上角位置，但 event.offsetY 返回鼠标位置。

我也试过layerY，但这是不对的。

dropped(e) {
  console.log('dropped at', e.offsetX, e.offsetY);
}

有没有简单的获取方法或我可以使用的库？

Answer 1

首先，第一次开始拖动鼠标时，您需要确定鼠标相对于元素的位置。通过将初始的e.offsetX 和e.offsetY 与页面进行比较；

将 元素 offsetX 和 offsetY 远离 鼠标的 offsetX 和 offsetY。这可能会告诉您您开始在距离元素左上角 50 像素 x 60 像素的位置开始拖动；

let initialPos = {
  x: e.offsetX - element.getBoundingClientRect().left, 
  y: e.offsetY - element.getBoundingClientRect().top
}

然后，您可以在放置元素时使用此50px 60px 位置来确定元素的左上角相对于您的鼠标的位置。