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 中协同使用。此模式兼顾兼容性、可维护性与安全性，是构建高性能拖拽排序组件的基石实践。
