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。这可能表明您开始从元素左上方的50px x 60px位置拖动；

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

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