javascript - 如何在“enddrag”上重新定位元素？

Question

我想知道如何使用“enddrop”事件侦听器来更改元素的位置。

我尝试使用这个：

document.addEventListener('dragend', e => { e.target.style.left = e.clientX; e.target.style.top = e.clientY; });

这可行，但它看起来不自然，因为元素左上角的坐标已更改为鼠标位置。因此，如果用户将元素拖动到左上角，它将完美地工作，但如果您拖动元素上的任何其他位置，它会给它一个活泼的效果，因为左上角将捕捉到鼠标的位置。

谢谢！

标签： javascripthtmldrag-and-dropdraggable

Answer 1

我最近解决了一个类似的问题：

点击链接：当它已经有子元素时防止放置事件？拖放

在您开始拖动（拖动开始）的那一刻，您根据元素和鼠标位置计算顶部和左侧偏移，并在结束拖动（拖动）事件时根据需要使用此偏移进行调整。

let offset = [0, 0] // initial state offset x, y
function dragStart(ev) {
    // your code..
    offsetX = ev.target.offsetLeft - ev.clientX
        ev.target.offsetLeft - ev.clientX,
        ev.target.offsetTop - ev.clientY
    ]
}

有任何疑问把我可以帮助你的代码。

希望这可以帮助。