如何在 dragover 事件中安全访问拖拽数据

html5 拖放 api 中，`datatransfer` 对象在 `dragover` 事件中不可读取（仅 `drop` 可用），需通过外部变量在 `dragstart` 时暂存关键数据，供 `dragover` 安全复用。

在实现拖拽排序（如列表项实时交换）时，开发者常希望在 dragover 阶段就触发位置预判或元素交换逻辑，以获得更流畅的交互体验。但一个关键限制是：dataTransfer 对象在 dragover 事件中无法读取其设置的数据——即使 dragstart 已成功调用 setData()，dragover 中调用 getData() 将返回空字符串或 NULL（浏览器出于安全策略限制该阶段访问敏感拖拽数据）。

因此，直接依赖 e.dataTransfer.getData() 在 dragover 中获取拖拽源索引的做法必然失败，正如示例中控制台输出所示：dragover 日志后无值，而 drop 日志正常输出 0。

✅ 正确方案：使用闭包或模块级变量暂存数据

最简洁、可靠的方式是在 dragstart 中将所需信息（如源元素索引、ID 或序列号）同步写入一个共享变量，并在 dragover 和 drop 中复用它：

let currentDraggedIndex = null;  function dragStart(e) {     // 设置 dataTransfer（兼容 drop 事件）     e.dataTransfer.setData('text/plain', String($(e.target).index()));     // 同时存入共享变量（供 dragover 使用）     currentDraggedIndex = $(e.target).index(); }  function sortableDropped(e) {     console.log('drop', e.dataTransfer.getData('text/plain')); // 仍可读取     // 实际交换逻辑可在此执行     handleDrop(e, currentDraggedIndex);     currentDraggedIndex = null; // 重置 }  function dragOver(e) {     e.preventDefault(); // ⚠️ 必须调用，否则 drop 不会触发     console.log('dragover', currentDraggedIndex); // ✅ 现在可正确输出     // 此处可执行实时高亮、插入标记、位置预判等 UI 反馈     handleDragOver(e, currentDraggedIndex); }  function handleDragOver(event, draggedIndex) {     const target = event.target.closest('.sortable-item');     if (!target) return;      // 示例：为被拖拽经过的项添加临时样式     target.classList.add('drag-over-target');     setTimeout(() => {         target.classList.remove('drag-over-target');     }, 100); }  function handleDrop(event, draggedIndex) {     const draggedEl = document.querySelectorAll('.sortable-item')[draggedIndex];     const targetEl = event.target.closest('.sortable-item');     if (!targetEl || draggedEl === targetEl) return;      const list = document.querySelector('.sortable-list');     const draggedRect = draggedEl.getBoundingClientRect();     const targetRect = targetEl.getBoundingClientRect();      // 简单插入逻辑：若拖拽元素在目标上方，则插入到目标前；否则插入到目标后     if (draggedRect.top < targetRect.top) {         list.insertBefore(draggedEl, targetEl);     } else {         list.insertBefore(draggedEl, targetEl.nextSibling);     } }

⚠️ 关键注意事项

• e.preventDefault() 是 dragover 的强制要求：若未在 dragover 中调用 preventDefault()，浏览器将阻止 drop 事件触发——这是常见疏漏。
• 变量作用域与生命周期：currentDraggedIndex 应为模块级（非全局）变量，且在 drop 或 dragend 后及时重置，避免跨拖拽会话污染。
• 不依赖 jquery 更佳实践（可选升级）：现代项目建议用原生 dom API 替代 jQuery 以减少依赖：

  // 替换 $(e.target).index() const items = Array.from(document.querySelectorAll('.sortable-item')); const draggedIndex = items.indexOf(e.target);

• 安全性补充：dataTransfer 在 dragover 不可读是浏览器主动设计，防止恶意站点在用户拖拽敏感内容（如文件、密码字段）时窃取数据。共享变量仅存储轻量标识（如索引），不涉及敏感信息，符合安全边界。

总结

dragover 无法读取 dataTransfer 是 HTML5 拖放规范的明确限制，而非 bug。绕过该限制的标准解法是“数据外挂”：在 dragstart 中将必要元数据存入可控变量，并在后续 dragover/drop/dragend 中协同使用。此模式兼顾兼容性、可维护性与安全性，是构建高性能拖拽排序组件的基石实践。