浏览器原生拖放API需在dragover时调用preventDefault()才能触发drop；自定义数据应通过ID映射表安全传递；排序时优先用elementFromPoint判断位置；移动端应降级或使用interact.js等库。
浏览器原生拖放（Drag and Drop）API 表面简单，实际容易卡在 dragover 阻止默认行为、数据传递丢失、跨元素边界失效这几个点上。不手动调用 event.preventDefault()，拖入目标区域会直接打开文件或跳转链接。
为什么 dragover 事件必须阻止默认行为
这是拖放功能能“接收拖入”的前提。浏览器对 dragover 的默认行为是拒绝放置（表现为禁用光标），不阻止它，后续的 drop 根本不会触发。
常见错误：只在 drop 里 preventDefault()，但 drop 压根没机会执行。
- 必须给目标元素绑定
dragover并立即调用event.preventDefault() - 可同时设置
event.dataTransfer.dropEffect = 'move'控制光标样式 - 如果目标是
<div> 或其他非表单元素，还需加 <code>draggable="true"才能被拖拽（仅当它是拖拽源时）如何安全传递自定义数据（不依赖文件/文本）
dataTransfer.setData()只支持字符串，且跨 origin 时多数类型会被清空；直接存对象或 DOM 节点会失败。别试图塞JSON.stringify()后在drop里解析——容易因编码/作用域丢失上下文。立即学习“Java免费学习笔记（深入）”；
更可靠的做法是用临时映射表 + 全局 ID：
const dragMap = new Map(); let nextId = 0; // 拖拽开始时 element.addEventListener('dragstart', (e) => { const id = String(nextId++); dragMap.set(id, { type: 'task', itemId: 123 }); e.dataTransfer.setData('text/plain', id); // 仅传 ID 字符串 }); // 放置时 target.addEventListener('drop', (e) => { e.preventDefault(); const id = e.dataTransfer.getData('text/plain'); const data = dragMap.get(id); if (data) { console.log('拿到数据:', data); dragMap.delete(id); // 清理 } });拖拽排序列表时的常见陷阱
用
dragenter/dragover判断插入位置时，不能只靠clientY和元素getBoundingClientRect()简单比大小——滚动容器、缩放、iframe 会让坐标错乱。- 优先使用
document.elementFromPoint(x, y)获取当前悬停的真实元素 - 监听
dragenter而非高频dragover来减少判断次数 - 给每个可插入间隙添加透明占位节点（如
<div class="drop-hint"></div>），通过classList.toggle()显示/隐藏提示线，避免实时计算边界 - 记得在
dragend或drop后清理所有临时提示节点和事件监听器
移动端根本没原生 drag API，怎么办
iOS 和 Android Chrome 都不支持
dragstart/drop等事件，连draggable="true"都被忽略。强行用 CSStouch-action: none+touchstart/move/end模拟，但滚动冲突、惯性、多点触控会让逻辑爆炸。真实项目中建议：
- 检测
'ontouchstart' in window，移动端直接降级为长按弹出操作菜单（如「移动到…」） - 若必须拖拽，用成熟库如
interact.js或sortablejs，它们内部已处理 touch / pointer / mouse 多端统一 - 切勿自己封装“兼容所有设备”的拖拽逻辑——手势识别的边缘 case 够写三篇论文
最常被忽略的是：拖放不是独立交互，它和 focus、scroll、CSS transform、shadow DOM 都有隐式冲突。哪怕只是加了
transform: translateZ(0)，某些旧版 Chrome 就会丢掉drop事件。动手前先确认目标环境的实际表现，别信文档里的“应该可以”。 - 优先使用
