HTML5 拖拽 API 交互细节：在拖拽过程中获取鼠标位置-H5教程-PHP中文网

drag事件不可靠，无法实时获取鼠标坐标；应监听dragover事件并调用preventdefault()，再通过clientx/clienty获取视口坐标，或结合getboundingclientrect()计算相对坐标。

html5 拖拽 api 交互细节：在拖拽过程中获取鼠标位置

在拖拽过程中获取鼠标位置，不能依赖 drag 事件的 clientX/clientY——因为 drag 事件本身**不触发**（规范明确说明：拖拽期间除 dragover 外，大多数拖拽事件不随鼠标移动频繁派发，且 drag 事件几乎从不触发）。真正可用、稳定、推荐的方式是监听 dragover 事件，并从中读取鼠标坐标。

为什么 drag 事件不可靠？

drag 事件在绝大多数浏览器中根本不会持续触发。HTML5 拖放规范将其定义为“表示拖拽操作正在进行”，但实际实现中它仅在拖拽开始后极短时间内触发一次（甚至不触发），不具备实时性。试图在 drag 回调里取 event.clientX 会得到过时或无效的位置。

正确做法：监听 dragover 并读取 clientX/clientY

dragover 是拖拽过程中**唯一高频、稳定触发**的事件（只要鼠标在可 droppable 区域上移动就会触发），且其事件对象完整携带鼠标位置信息：

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

使用 event.clientX 和 event.clientY 获取视口坐标
使用 event.pageX 和 event.pageY 获取文档坐标（含滚动偏移）
务必在事件处理器中调用 event.preventDefault()，否则默认行为会阻止 drop 触发

获取相对于目标元素的坐标（常用场景）

若需知道鼠标在被拖入容器内的相对位置（如高亮插入点、计算悬浮提示位置），可结合 getBoundingClientRect()：

droppable.addEventListener('dragover', (e) => {
  e.preventDefault(); // 必须！否则无法 drop
  const rect = e.currentTarget.getBoundingClientRect();
  const x = e.clientX - rect.left; // 相对左边缘
  const y = e.clientY - rect.top;  // 相对上边缘
  console.log('鼠标在容器内位置：', x, y);
});