HTML5: dragover(), drop(): 如何获取当前 x,y 坐标？答案

【问题标题】：HTML5: dragover(), drop(): how get current x,y coordinates?HTML5: dragover(), drop(): 如何获取当前 x,y 坐标？
【发布时间】：2011-01-27 03:44:00
【问题描述】：

如何在 HTML5 DnD 中拖动“dragover”和放置（“drop”）之后确定 (x,y) 坐标？

我找到了一个网页，其中描述了用于 Dragover 的 x,y（查看 e.offsetX 和 e.layerX 以查看是否为各种浏览器设置，但对于我来说，它们并未设置）。

drop(e) 函数用什么来找出当前放置目标中实际放置的位置？

我正在编写一个在线电路设计应用程序，我的放置目标很大。

我需要下拉到鼠标级别来找出 x,y 还是 HTML5 提供了更高级别的抽象？

【问题讨论】：

标签： drag-and-drop html

【解决方案1】：

应该设置属性clientX 和clientY（在现代浏览器中）：

function drag_over(event) {
    console.log(event.clientX);
    console.log(event.clientY);
    event.preventDefault();
    return false;
}
function drop(event) {
    console.log(event.clientX);
    console.log(event.clientY);
    event.preventDefault();
    return false;
}

Here's a (somewhat) practical example 适用于 Firefox 和 Chrome。

【讨论】：

感谢演示。你知道为什么在 Safari 和 Chrome 上，当文本被丢弃时，它不会完全保持在同一个位置吗？拖动的元素移动了几个像素。
@Charles 我在 Chrome 中尝试过（在 Windows 上）但我没有看到它，如果你知道它是什么请告诉我
好主意，但是 clientX 和 clientY 将不准确，与光标与被删除元素左上角的距离成正比。

【解决方案2】：

以 robertc 的回答为基础并解决该问题：

clientX 和 clientY 将不准确，与光标与被删除元素左上角的距离成正比。

您可以通过从dragEnd 记录的客户端坐标中减去dragStart 记录的客户端坐标来简单地计算增量距离。请记住，被删除的元素在dragEnd 处仍然具有完全相同的位置，您可以通过增量距离对其进行更新以获得新的左侧和顶部位置坐标。

这是一个 demo 在 react 中，虽然同样可以在普通 JS 中完成。

【讨论】：