`dragover` 事件默认无法访问 `e.datatransfer.getdata()`，因其数据权限受限；需通过全局变量或闭包在 `dragstart` 中暂存拖拽元数据，并在 `dragover` 中复用，实现拖拽过程中的实时交互逻辑。
在实现基于原生 HTML5 拖放 API 的可排序列表时，开发者常希望在 dragover 阶段（即元素悬停目标区域时）就触发位置预判或视觉反馈（如插入线、高亮交换区），而非等到 drop 才执行逻辑。但一个关键限制是：浏览器出于安全策略，默认禁止在 dragover 事件中读取 dataTransfer 的敏感数据（如 text/plain、text/html 等），仅允许在 drop 和 dragend 等“提交”阶段访问。因此，直接调用 e.dataTransfer.getData('text/plain') 在 dragover 中会返回空字符串或抛出异常（取决于浏览器），导致控制台输出 dragover（无值）。
✅ 正确解法是：将拖拽源的必要标识信息（如索引、ID 或序列号）在 dragstart 中同步写入一个可被 dragover 访问的作用域变量，从而绕过 dataTransfer 的访问限制，同时保持逻辑清晰与性能可控。
以下为优化后的完整实现示例（移除 jQuery 依赖，使用现代原生 DOM API，更健壮且无第三方耦合）：
// 全局状态：存储当前拖拽项的原始索引（推荐改用闭包或 WeakMap 进一步封装）
let currentDragIndex = null;
function handleDragStart(e) {
const item = e.target;
const list = item.parentElement;
const index = Array.from(list.children).indexOf(item);
e.dataTransfer.setData('text/plain', String(index)); // 仍需设置以满足 drop 要求
currentDragIndex = index; // 同步到共享状态
e.dataTransfer.effectAllowed = 'move'; // 明确声明操作类型，提升兼容性
}
function handleDragOver(e) {
e.preventDefault(); // ⚠️ 必须阻止默认行为，否则 drop 不会触发
if (currentDragIndex !== null) {
console.log('dragover — dragging item at index:', currentDragIndex);
// ✅ 此处可安全执行：计算插入位置、更新视觉反馈、高亮目标项等
// 例如：highlightInsertPosition(e.target, currentDragIndex);
}
}
function handleDrop(e) {
e.preventDefault();
const targetIndex = Array.from(e.target.parentElement.children).indexOf(e.target);
console.log('drop — source index:', currentDragIndex, 'target index:', targetIndex);
// ✅ 此处执行真实 DOM 重排逻辑（注意：需处理 index 偏移）
// reset state after drop
currentDragIndex = null;
}
function handleDragEnd() {
// 清理状态（例如用户取消拖拽）
currentDragIndex = null;
}
// 初始化监听器
function initSortableList() {
document.querySelectorAll('.sortable-item').forEach(item => {
item.draggable = true;
item.addEventListener('dragstart', handleDragStart);
item.addEventListener('dragover', handleDragOver);
item.addEventListener('drop', handleDrop);
item.addEventListener('dragend', handleDragEnd);
});
}
document.addEventListener('DOMContentLoaded', initSortableList);? 关键注意事项：
- e.preventDefault() 在 dragover 中不可或缺，否则浏览器会忽略该事件，导致 drop 无法触发；
- currentDragIndex 是轻量级状态，仅存储数字索引，避免引用 DOM 节点引发内存泄漏；如需更强封装，可用 WeakMap 关联拖拽源元素与元数据；
- 若页面存在多个独立可排序列表，应为每个列表维护独立状态（例如按 data-sortable-id 分组），避免跨列表干扰；
- dragover 触发频率极高（每毫秒多次），请避免在其中执行重绘操作（如 innerHTML 修改）或复杂计算，建议节流（throttle）或委托至 requestAnimationFrame。
? 进阶提示：若需支持跨容器拖拽（如从 A 列表拖到 B 列表），可在 dragstart 中额外存储 listId，并在 dragover 中校验目标容器合法性，增强健壮性。
通过这种状态外置 + 事件协同的设计模式，你既能遵守浏览器的安全约束，又能实现流畅的拖拽实时交互体验——这才是专业级可排序组件的底层实践基础。
