Question

我想知道如何使用'enddrop'事件监听器来改变元素的位置。

我试过用这个：

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

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

谢谢！

Answer 1

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

点击链接：Prevent drop event when it's already have child element ? Drag and Drop

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

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
    ]
}

任何疑问都会提供我可以帮助你的代码。

希望这有帮助。

如何在'enddrag'上重新定位元素？

1 个答案: