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到60px的位置;

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

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