Question

如何在HTML5 DnD中拖动“dragover”和放弃（“drop”）后确定（x，y）坐标？

我找到了一个描述x，y for dragover的网页（查看e.offsetX和e.layerX，看看是否为各种浏览器设置了但是为了我的生活，他们没有设置）。

你使用drop（e）函数来找出实际丢弃的当前放置目标中的WHERE？

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

我是否需要下拉到鼠标级才能找到x，y或者HTML5是否提供了更高级别的抽象？

Answer 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。

Answer 2

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

clientX和clientY与光标到被放置元素的左上角的距离成比例将不正确。

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

这是一个demo的反应，尽管同样可以在普通JS中完成。

HTML5：dragover（），drop（）：如何获取当前的x，y坐标？

2 个答案: