HTML5: dragover()，drop()：如何获取当前的x，y坐标？
HTML5: dragover()，drop()：如何获取当前的x，y坐标？
提问于 2010-03-13 20:34:25
在HTML5 DnD中拖动"dragover“和拖放(" drop ")之后，如何确定(x，y)坐标？
我找到了一个网页，上面描述了拖拽的x，y(看看e.offsetX和e.layerX，看看是否为各种浏览器设置了，但对于我来说，它们是没有设置的)。
对于drop(e)函数，您使用什么来找出它在当前拖放目标中实际被删除的位置？
我正在写一个在线电路设计应用程序，我的下载目标很大。
我是否需要下拉到鼠标级别才能找到x，y，或者HTML5是否提供了更高级别的抽象？
回答 2
Stack Overflow用户
发布于 2011-08-03 22:43:28
应该设置属性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;
}在火狐和Chrome中工作的Here's a (somewhat) practical example。
Stack Overflow用户
发布于 2020-02-24 04:16:32
要在robertc的回答和解决问题的基础上进行构建：
clientX和clientY将不准确，与光标与所放元素的左上角的距离成正比。
您可以通过从记录在dragEnd的客户端坐标中减去在dragStart记录的客户端坐标来简单地计算增量距离。请记住，被拖放的元素在dragEnd处仍然具有完全相同的位置，您可以通过增量距离进行更新，以获得新的左侧和顶部位置坐标。
下面是react中的一个demo，尽管在普通JS中也可以完成同样的操作。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/2438320
复制相关文章
相似问题
腾讯云开发者
