HTML5原生拖放需在dragstart中调用setData()，并在dragover和drop中均调用preventDefault()；否则拖放静默失败。移动端Safari及Android WebView基本不支持非链接/图片元素的draggable。
dragstart 事件里必须设置 dataTransfer 否则拖放会失败
浏览器默认只允许图片、链接、选中文本被拖拽，其他元素（比如 <div>）即使加了 draggable="true"，不手动设置 dataTransfer 就会静默失败——看起来能拖，松手却没反应。
关键点在于：必须在 dragstart 事件中调用 setData()，哪怕只是设个空字符串或占位类型：
element.addEventListener('dragstart', (e) => {
e.dataTransfer.setData('text/plain', ''); // 必须有这行
});常见错误：
- 忘记绑定 dragstart，只写了 draggable="true"
- 在 dragover 或 drop 里才设 dataTransfer（太晚了，无效）
- 用 setData('text/html', ...) 却没对应处理逻辑，导致目标端解析失败
drop 事件默认被阻止，preventDefault() 是硬性要求
drop 事件本身不会触发，除非在 dragover（或 dragenter）里调用 e.preventDefault()。这是 HTML5 拖放的强制守门机制，不是可选项。
典型写法要成对出现：
立即学习“前端免费学习笔记（深入）”；
target.addEventListener('dragover', (e) => {
e.preventDefault(); // 不加这句，drop 根本不会触发
});
<p>target.addEventListener('drop', (e) => {
e.preventDefault(); // 这里也要防，避免浏览器打开文件/跳转链接
const data = e.dataTransfer.getData('text/plain');
// 处理拖入内容
});容易踩的坑：
- 只在 drop 里 preventDefault()，漏了 dragover → drop 永远不触发
- 绑定 dragover 到父容器，但子元素没继承事件冒泡逻辑，导致局部区域不可拖入
- 使用 CSS pointer-events: none 意外屏蔽了拖放事件
识别是否为 HTML5 原生拖放，看 dataTransfer.types 和 effectAllowed
仅靠监听事件名不能确认是原生拖放行为——用户可能用鼠标模拟、第三方库封装、甚至剪贴板粘贴。真要识别“HTML5 Drag and Drop 特征”，得查 dataTransfer 的元信息：
-
e.dataTransfer.types是一个DOMStringList，原生拖放通常含"text/plain"、"text/html"或自定义类型如"application/x-custom-item" -
e.dataTransfer.effectAllowed在dragstart中反映拖拽方声明的允许操作（"move"/"copy"/"link"），目标端可通过dropEffect控制反馈图标 - 注意：
files属性只在拖入文件时存在，不是所有拖放都有；而getData()取不到数据 ≠ 不是拖放，可能是类型不匹配或未正确setData()
验证示例（在 drop 事件中）：
dropTarget.addEventListener('drop', (e) => {
console.log('types:', e.dataTransfer.types); // ["text/plain"]
console.log('effectAllowed:', e.dataTransfer.effectAllowed); // "move"
console.log('files length:', e.dataTransfer.files.length); // 0 或 >0
});移动端和 Safari 对 draggable 支持极弱，别依赖原生拖放做核心交互
iOS Safari 和大多数 Android WebView 默认禁用非链接/图片元素的 draggable，即使加了属性、绑了事件、设了 dataTransfer，也大概率无响应。这不是 bug，是主动限制。
可行方案只有两个：
- 完全放弃原生 drag/drop，改用 touchstart/move/end + 位置计算模拟（配合 transform 移动元素）
- 用 draggable="true" 仅作降级提示，主流程走点击+弹窗/列表排序等替代交互
特别注意：
- dragstart 在 iOS 上可能触发但后续事件全丢
- dataTransfer.setDragImage() 在 Safari 中基本无效，图标始终是半透明原元素截图
- 不要用 dragleave 做“离开高亮取消”逻辑，它触发不稳定，尤其快速划过时根本收不到
