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

Posted 2023-05-08

【中文标题】HTML5: dragover(), drop(): 如何获取当前 x,y 坐标？

【英文标题】：HTML5: dragover(), drop(): how get current x,y coordinates?

【发布时间】：2011-01-27 03:44:00

【问题描述】：

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

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

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

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

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

【参考方案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 中完成。