HTML5拖拽：如何获取dragover等事件中拖拽浮层的页面坐标？

嘿，这个问题问到点子上了！其实原生的dragover/dragenter/dragleave事件本身并没有直接提供你设置的拖拽浮动元素的页面坐标——它们只暴露了鼠标指针的位置（比如你用的event.clientX/clientY）。不过别担心，我们可以通过一些简单的计算来得到目标坐标，核心思路是利用你设置setDragImage时的偏移量。

核心原理 #

当你调用event.dataTransfer.setDragImage(element, xOffset, yOffset)时，这两个偏移量xOffset和yOffset的含义是：鼠标指针位于拖拽图像上的相对位置。比如你设置xOffset=50、yOffset=50，就表示鼠标指针在拖拽图像的(50,50)位置（从图像左上角开始算）。

反过来，要得到拖拽图像左上角的页面坐标，我们可以用鼠标的页面坐标减去这两个偏移量：

// 拖拽元素左上角的页面X坐标
const dragElementPageX = event.pageX - xOffset;
// 拖拽元素左上角的页面Y坐标
const dragElementPageY = event.pageY - yOffset;

具体实现步骤 #

1. 在dragstart事件中记录偏移量
   因为setDragImage是在dragstart里调用的，所以我们可以在这里把偏移量存到变量里，方便后续事件使用：

   // 全局或闭包内存储偏移量
   let dragOffsetX = 0;
   let dragOffsetY = 0;
   
   function dragStart(event) {
     event.preventDefault();
     const dragImage = document.getElementById('custom-drag-image');
     // 自定义偏移量：比如让图像左上角对齐鼠标指针
     dragOffsetX = 0;
     dragOffsetY = 0;
     event.dataTransfer.setDragImage(dragImage, dragOffsetX, dragOffsetY);
     // 如果是用默认的拖拽元素（不调用setDragImage），则计算鼠标在元素上的偏移
     // const rect = event.target.getBoundingClientRect();
     // dragOffsetX = event.clientX - rect.left;
     // dragOffsetY = event.clientY - rect.top;
   }
   

2. 在dragover等事件中计算坐标
   在dragover/dragenter/dragleave里，用鼠标的页面坐标减去之前记录的偏移量即可：

   function dragOver(event) {
     event.preventDefault(); // 必须阻止默认行为，否则无法触发drop
     // 计算拖拽元素的页面坐标
     const elementPageX = event.pageX - dragOffsetX;
     const elementPageY = event.pageY - dragOffsetY;
     console.log(`拖拽元素页面坐标：X=${elementPageX}, Y=${elementPageY}`);
   }
   

注意事项 #

• 如果你的拖拽图像是动态创建的，或者偏移量是根据元素尺寸动态计算的（比如让图像中心跟随鼠标），一定要在dragstart里把计算好的偏移量存下来。
• event.pageX/event.pageY是相对于整个文档的坐标，如果你需要相对于视口的坐标，可以用event.clientX/event.clientY直接减去偏移量。

内容的提问来源于stack exchange，提问作者Shelef