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

2022-01-11 00:00:00 drag-and-drop html

如何在 HTML5 DnD 中拖动dragover"和放置(drop")之后确定 (x,y) 坐标?

How does one determine the (x,y) coordinates while dragging "dragover" and after the drop ("drop") in HTML5 DnD?

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

I found a webpage that describes x,y for dragover (look at e.offsetX and e.layerX to see if set for various browsers but for the life of me they ARE NOT set).

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

What do you use for the drop(e) function to find out WHERE in the current drop target it was actually dropped?

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

I'm writing an online circuit design app and my drop target is large.

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

Do I need to drop down to mouse-level to find out x,y or does HTML5 provided a higher level abstraction?

推荐答案

应该设置属性 clientX 和 clientY(在现代浏览器中):

The properties clientX and clientY should be set (in modern browsers):

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

这是一个在 Firefox 和 Chrome 中工作的(有点)实际示例.

相关文章