dragover中可用clientX/clientY但必须调用preventDefault()，否则drop不触发；稳定坐标应在drop事件中获取，结合getBoundingClientRect()计算相对位置。
dragover 事件里不能直接用 clientX/clientY 获取拖拽坐标？
能，但得注意时机——dragover 本身会频繁触发，且默认行为会阻止浏览器原生拖放界面，不调用 event.preventDefault() 的话，clientX 和 clientY 虽然存在，但后续的 drop 事件可能根本不会触发，坐标也就没机会用了。
真正稳定可靠的坐标获取点是 drop 事件，它携带完整的鼠标位置信息，且只在用户松手时触发一次。
-
drop事件对象有clientX、clientY（视口坐标），也有pageX、pageY（含滚动偏移） -
dragover里加event.preventDefault()是必须的，否则drop不会触发 - 不要在
dragstart或dragenter里取坐标——它们不反映松手位置
怎么监听 drop 并拿到精确的 DOM 元素位置？
光有坐标还不够，多数场景需要知道“松手时鼠标在目标容器内的相对位置”，比如画布绘图、文件上传定位、拖拽排序等。
关键步骤是：先用 event.target 找到被拖入的元素，再用 getBoundingClientRect() 计算偏移：
立即学习“前端免费学习笔记（深入）”；
container.addEventListener('drop', (e) => {
e.preventDefault();
const rect = e.target.getBoundingClientRect();
const x = e.clientX - rect.left; // 相对于 target 左上角的 x
const y = e.clientY - rect.top; // 相对于 target 左上角的 y
console.log('relative position:', { x, y });
});-
e.target是实际接收 drop 的最深子元素，不一定是你绑定事件的容器，必要时用e.currentTarget - 如果容器有
transform或border，getBoundingClientRect()已自动包含这些影响 - 避免用
offsetLeft/offsetTop——它们不处理 CSS transform 和滚动
为什么有时 clientX/clientY 返回 0 或 NaN？
常见于两个错误场景：一是没阻止 dragover 默认行为导致 drop 事件被取消；二是监听了错误的事件类型，比如在 dragstart 里读 clientX——该事件由源元素触发，坐标是拖拽起点，且部分浏览器（如 Safari）在此阶段不提供坐标。
- 检查控制台是否报错
Failed to execute 'getData' on 'DataTransfer': The operation is insecure.—— 这通常意味着没在dragover中调用preventDefault()，导致整个拖放链中断 - 确保监听的是
drop，不是dragend（后者是拖拽结束，与文件投放无关） - 移动端没有原生文件拖放，这个逻辑仅适用于桌面端
拖拽多个文件时，坐标还准不准？
准。无论拖一个还是十个文件，drop 事件的坐标都只取决于鼠标松手那一刻的位置，和文件数量、大小、类型完全无关。但要注意：一次 drop 只触发一次事件，所有文件都打包在 e.dataTransfer.files 里。
- 坐标和
files列表是同一事件上下文，可安全配对使用 - 如果需支持多区域分别响应（如左侧上传、右侧预览），建议用
pointer-events: none避免子元素拦截事件，或统一在容器层处理drop - 不要试图在
file input上监听拖放——它不支持，必须用普通 DOM 元素
坐标本身不难拿，难的是时机判断和目标元素边界处理。很多 bug 其实出在 dragover 忘记 preventDefault()，或者误把 dragenter 当成落点事件。
