dragstart 事件必须调用 dataTransfer.setData() 才能在 drop 中获取数据，否则 getData() 返回空字符串；drag 事件仅用于状态通知，非必需；dragend 不保证 drop 成功且无法读取 dataTransfer；Safari 移动端 drag/dragend 支持不稳定，需降级处理。
dragstart 事件必须设置 dataTransfer.setData()
不设置 dataTransfer.setData()，后续的 drop 事件里就拿不到数据——哪怕只是想传个字符串标识，也得调用一次。浏览器不会自动填充任何默认值。
常见错误现象：
- 拖动后
drop里e.dataTransfer.getData('text/plain')返回空字符串 - 整个拖放流程看起来“走通了”，但业务逻辑没触发，因为没传数据
使用场景：
- 标记被拖元素身份（如
e.dataTransfer.setData('text/plain', 'item-42')） - 预设 drop 区域可接受的数据类型（
'text/html'、'application/json'等） - 配合
effectAllowed控制允许的操作（e.dataTransfer.effectAllowed = 'move'）
drag 事件不是必需监听项，但可用于实时反馈
drag 事件在拖动过程中高频触发（约每 350ms 一次），但它本身不参与数据传递或投放判定，纯属“状态通知”。多数场景下可以不监听。
立即学习“前端免费学习笔记（深入）”；
容易踩的坑：
- 误以为要靠
drag去更新 UI —— 实际上视觉反馈更推荐用dragenter/dragover+ CSS 类控制 - 在
drag里做 heavy 计算或 DOM 操作，导致拖拽卡顿 - 绑定
drag但没同时绑定dragstart，结果事件根本不会触发（因为没启动拖放）
适用情况：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 需要在拖动中动态修改
dataTransfer.dropEffect（比如根据鼠标位置切换copy/move） - 记录拖动轨迹用于分析（非 UI 场景）
dragend 事件不保证 drop 成功，且无法读取 dataTransfer
dragend 在松手后**无论是否落在有效目标上**都会触发，它只表示拖放动作结束。此时 e.dataTransfer 已被清空或不可读，不能用来判断是否 drop 成功。
为什么这样做：
- 安全限制：防止目标区域外的 drop 也能窃取拖拽数据
- 语义清晰：
dragend是源端生命周期终点，drop才是目标端业务入口
实操建议：
- 清理拖动时添加的临时 class 或样式（如
document.body.classList.remove('is-dragging')） - 重置源元素状态（如恢复 opacity、移除 placeholder 效果）
- 不要在这里调用
e.dataTransfer.getData()—— 它会返回空或抛错
移动端 Safari 对 drag/dragend 支持不稳定
iOS 16+ 的 Safari 仍存在 drag 事件丢失、dragend 不触发等问题，尤其在快速拖动或跨 iframe 场景下。这不是 bug，而是苹果对指针事件映射的保守策略。
关键应对点：
- 不能依赖
drag做核心逻辑；视觉反馈优先用dragenter+dragleave -
dragend的清理逻辑需有 fallback：比如结合touchend或pointerup补漏 - 生产环境务必做特征检测：
'draggable' in document.createElement('span')和'ondragstart' in window
真正容易被忽略的是：即使你写了完整的 drag 事件链，Safari 用户也可能全程看不到 drag 日志，但 dragstart 和 drop 通常可用。别把它当调试依据。
