draggable="true"是开启原生拖拽的必要条件但非充分条件，必须配合尺寸、样式允许、事件绑定、setData()调用及dragover.preventDefault()等完整链路才能生效。
draggable="true" 是开启原生拖拽的必要条件，但不是充分条件。只加这个属性，元素光标可能变手形，但拖不动、不触发事件、drop 也不执行——这是绝大多数人卡住的第一步。
draggable 属性值怎么写才有效
必须显式写 draggable="true"，不能依赖默认或模糊写法：
-
draggable="auto"在 Chrome/Safari 中对<div>无效，Firefox 直接忽略，不要用 - 空字符串
draggable虽等价于true，但可读性差，容易被误删或忽略 -
draggable="false"可禁用图片、链接等原生可拖元素，但对<input>或<textarea>无效（浏览器强制禁用） - 属性必须写在**被拖元素自身上**，父容器设了没用
为什么加了 draggable="true" 还是 dragstart 不触发
常见原因不是属性写错了，而是浏览器根本没进入拖拽流程：
- 元素没有尺寸：空
<div>且无width/height/padding，浏览器判定“不可交互”，dragstart压根不会派发 - 样式拦截：
user-select: none或pointer-events: none会直接阻断鼠标按下阶段 - 没显式绑定事件：仅设属性不等于注册了
dragstart，必须用addEventListener('dragstart', ...)或内联ondragstart -
<input>类表单控件即使写了draggable="true"也无效，这是浏览器规范限制
dragstart 里 setData() 的 type 参数必须匹配
event.dataTransfer.setData() 的第一个参数是 MIME 类型，不是随意起的别名，浏览器会校验：
立即学习“前端免费学习笔记（深入）”；
- 跨浏览器兼容首选
"text/plain"或"text/html"；大小写敏感，"Text/Plain"会失败 - 填
"mydata"或"json"在 Firefox 中静默失败，Chrome 可能返回空字符串 - 结构化数据建议先
JSON.stringify()，再塞进"text/plain"，避免自定义类型兼容问题 - 哪怕只传空字符串也要写：
e.dataTransfer.setData('text/plain', '')，否则整个拖拽链在起点就中断
移动端原生 drag/drop 完全不可用
这不是兼容性问题，是平台级缺失：
- iOS Safari 和 Android Chrome 均不触发
dragstart/drop，draggable="true"在触摸场景下基本失效 - 检测
'ontouchstart' in window后必须降级：用touchstart/touchmove+transform模拟，或引入interact.js - 别拿桌面代码直接跑在手机上测试——连控制台都不会报错，事件就是不触发
最容易被忽略的是：拖拽不是“设个属性就完事”，而是一条强依赖顺序和精确配置的链路——draggable="true" → dragstart 绑定 → setData() 执行 → dragover.preventDefault() 持续调用 → drop 中取值。漏掉任意一环，行为就静默失败，且往往不报错。
