draggable="true" 仅是拖拽起点而非功能开关；需确保元素有尺寸、CSS不拦截、绑定dragstart并调用setData()、目标区监听dragover且每次preventDefault()、drop时用匹配MIME类型取值。
draggable="true" 只是拖拽链路的起点，不是功能开关。设了它，元素光标可能变拖拽样式，但 dragstart 不触发、drop 不执行、数据传不过去——这是默认行为，不是 bug。
为什么加了 draggable="true" 却完全没反应
常见现象：鼠标悬停有拖拽光标，但按下拖动时无任何事件触发；控制台静默，连 dragstart 都不派发。
- 元素没有尺寸：空
<div>且无width/height/padding/content，浏览器判定“不可交互”，直接跳过拖拽流程 - CSS 拦截：父级或自身设置了
pointer-events: none或user-select: none，阻断了mousedown阶段 - 事件没绑定：仅写属性 ≠ 注册监听器，必须用
addEventListener('dragstart', ...)或内联ondragstart - 表单控件无效：
<input>、<textarea>即使硬加draggable="true"，浏览器也强制忽略
dragstart 里必须做的三件事
漏掉任意一项，整个拖拽链在起点就中断，后续 drop 永远拿不到数据。
- 必须调
e.dataTransfer.setData('text/plain', '')—— 空字符串也行，但这一行不能少；否则 Chrome/Firefox/Safari 全部静默放弃 - 推荐用自定义类型传业务数据，比如
e.dataTransfer.setData('text/id', e.target.id)或e.dataTransfer.setData('application/json', JSON.stringify({type: 'card', id: 1}))，避免和系统拖图片/链接冲突 - 显式设置
e.dataTransfer.effectAllowed = 'move'（或'copy'），否则 Safari 等浏览器可能拒绝匹配dropEffect
dragover 不调 preventDefault()，drop 就永远不会触发
这不是可选项，是浏览器强制策略：不阻止默认行为，目标区就被视为“禁止投放”，松手瞬间 drop 被丢弃，连事件都不派发。
立即学习“前端免费学习笔记（深入）”；
- 必须在目标容器上监听
dragover，并在回调中每次触发都执行e.preventDefault()—— 只绑一次不够，它在拖动过程中高频持续触发 - 别在
dragenter里preventDefault()，那控制的是“能否进入”，不影响“能否投放” - 如果目标区域是动态生成的（比如 Vue/React 渲染后挂载），确保事件绑定发生在元素真实存在之后，或委托给有稳定生命周期的父容器
- 目标元素需有明确尺寸（哪怕
min-height: 1px），否则dragover根本无法命中
移动端原生 drag/drop 基本不可用，别白费力气
iOS Safari 和 Android Chrome 均未实现触摸场景下的稳定支持：draggable="true" 在手指操作下几乎不触发 dragstart，drop 更无从谈起。这不是兼容性问题，是平台级缺失。
- 检测
'ontouchstart' in window后必须降级：用touchstart/touchmove+transform模拟位移，或引入interact.js - 不要把桌面端代码直接扔到手机上测——控制台不会报错，事件就是不触发，调试器也看不到任何拖拽相关日志
- 即使强行 hack，也无法保证跨机型表现一致；真实项目中，只要涉及手指拖拽，原生 API 就该被绕开
最常被忽略的其实是顺序和时机：draggable="true" → 元素有尺寸 → CSS 不拦截 → dragstart 绑定且 setData() 执行 → 目标区监听 dragover 并每次 preventDefault() → drop 中用严格匹配的 MIME 类型取值。缺一环，整条链就断在看不见的地方。
