拖放事件监听必须在目标元素上显式设置 draggable="true"，仅绑定 dragstart 无效；drop 不触发主因是 dragover 未调用 preventDefault()；dataTransfer 读取需统一 MIME 类型如 text/plain；移动端原生 Drag and Drop 不支持，应改用 PointerEvent 或第三方库。
拖放事件监听必须在目标元素上显式设置 draggable="true"
很多初学者以为只要绑定 dragstart 就能触发拖放，结果发现完全没反应——根本原因是源元素默认不可拖拽。HTML 中只有少数元素（如 <img>、<a>）原生支持拖拽，其他元素（比如 <div>、<span>）必须手动加 draggable="true" 属性。
注意：仅加属性还不够，还需在 dragstart 事件中调用 event.dataTransfer.setData() 设置拖拽数据，否则部分浏览器（尤其是 Safari）会拒绝启动拖拽流程。
-
draggable="true"是必需的 HTML 属性，不是 JS 属性，不能靠element.draggable = true动态补救（它只影响渲染层，不激活底层拖拽逻辑） - 推荐在初始化时就写死该属性：
<div draggable="true" data-id="item-1">拖我</div> - 如果动态插入元素，记得插入后立即补上
draggable="true"并绑定事件，不要依赖后续 JS 补设
drop 事件不触发？大概率是 dragover 没取消默认行为
这是最常卡住开发者的坑：drop 事件永远不会触发，除非目标区域在 dragover 阶段明确调用 event.preventDefault()。浏览器默认阻止任意元素接受拖放，这是安全限制，无法绕过。
正确写法必须包含两步：监听 dragover 并阻止默认行为 + 监听 drop 处理数据。
立即学习“前端免费学习笔记（深入）”；
- 只写
drop监听器而忽略dragover，drop永远不会触发 -
dragover的preventDefault()必须在事件处理函数内同步执行，异步（如setTimeout）无效 - 如果需要视觉反馈（比如高亮），应在
dragenter和dragleave中控制 class，而不是在dragover里反复操作 DOM（性能差且易错）
从 dataTransfer 读取数据要注意 MIME 类型和浏览器兼容性
dataTransfer.getData('text/plain') 看似简单，但实际中容易因类型不匹配拿不到值。拖拽源设置的 MIME 类型必须和目标读取时一致，且不同浏览器对自定义类型的支持程度不同。
更稳妥的做法是用 text/plain 或 text/uri-list 这类广泛支持的类型，并把结构化数据（如 ID、JSON 字符串）序列化后传入。
- 源端设置：
event.dataTransfer.setData('text/plain', JSON.stringify({id: 'item-2', type: 'card'})) - 目标端读取：
const data = JSON.parse(event.dataTransfer.getData('text/plain')) - 避免使用
'application/json'—— Firefox 支持，Chrome/Safari 不认，会返回空字符串 - 不要依赖
dataTransfer.files获取非文件拖拽的数据；它只在真正拖入文件时有值
移动端不支持原生 Drag and Drop API，别白费力气适配
所有主流移动浏览器（iOS Safari、Android Chrome）都不实现 dragstart/dragend 等事件。这不是 bug，是规范明确不强制要求的特性。试图用 touchstart + touchmove 模拟整个拖放链路，成本极高且体验割裂。
如果你的应用必须支持移动拖放，建议直接切换技术栈：用 PointerEvent 或第三方库（如 sortablejs、react-dnd 的 touch backend）接管交互逻辑，而非强行 patch 原生 API。
一个容易被忽略的事实：即使你在桌面端调试完美，在 iOS 上打开同一页面，draggable="true" 属性会被忽略，drag* 事件一个都不会触发 —— 这不是代码问题，是平台限制。
