draggable="true"仅启用拖拽开关，不绑定dragstart事件、不调用dataTransfer.setData()、不阻止dragover默认行为，拖拽必然失败；常见原因包括样式拦截、空元素无尺寸、事件未显式注册。
draggable="true"本身不触发任何行为，只让元素“能被拖起”；拖拽失败90%是因为没配事件、没传数据、或没阻止dragover默认行为。
draggable="true"加了但dragstart根本不触发？
这是最常卡住人的第一步。元素光标变手形≠事件已注册，浏览器根本不会自动派发dragstart。
- 必须用
addEventListener('dragstart', ...)或内联ondragstart显式绑定，仅设属性毫无作用 -
event.dataTransfer.setData()必须在dragstart回调里调用，且至少传一个浏览器认可的type，比如"text/plain"或"text/html"；填"mydata"或"json"在Firefox中会静默失败 - 空
<div>没有宽高时，浏览器判定“不可交互”，dragstart压根不触发——加min-height: 24px或padding: 8px就能解决 - 检查是否被样式拦截：
user-select: none或pointer-events: none会让mousedown都失效，dragstart自然不会来
drop事件始终不执行？关键就看dragover里有没有preventDefault()
目标元素监听了drop却没反应？不是drop写错了，而是dragover没拦住浏览器默认拦截逻辑。
-
dragover事件必须监听，且回调中必须调用e.preventDefault()——e.stopPropagation()没用，return false也不行 - 目标容器如果是空
<div>，还要确认它没被display: none或visibility: hidden隐藏，否则无法命中 - Safari对
dataTransfer.effectAllowed和dropEffect匹配更敏感：建议在dragstart里设e.dataTransfer.effectAllowed = 'move'，在dragover里设e.dataTransfer.dropEffect = 'move'
为什么img和a标签不用设draggable也能拖，而div必须设？
浏览器对部分元素有默认拖拽行为，这不是bug，是规范设计。但这也正是调试时最容易误判的地方。
立即学习“前端免费学习笔记（深入）”；
-
<img>、<a>、选中的文本，默认draggable="auto"（等价于true），所以直接可拖 - 自定义
<div>、<p>等，默认draggable="false"，必须显式写draggable="true"才启用基础能力 -
<input>、<textarea>即使写了draggable="true"也无效——浏览器强制禁用表单控件的拖拽 - 别拿
<img>当参照去调试你的<div>，它们走的是两套机制
移动端完全不支持原生drag/drop，别硬扛
所有iOS Safari和大部分Android WebView中，dragstart、dragover、drop事件基本不触发或行为异常，这不是兼容性问题，是平台级限制。
- 原生API在touch设备上不可靠，连事件都收不到，更别说实现拖动反馈或位置计算
- 如果项目需要响应式拖拽（比如手机端排序列表），必须换方案：用
touchstart/move/end模拟，或引入interact.js这类专为多端设计的库 - 哪怕只是想“先在桌面跑通”，也要提前意识到：这套逻辑无法平移，后期补移动端时几乎要重写交互层
真正难的不是写对那三行事件绑定，而是理解浏览器把拖拽拆成了“发起权”“传输权”和“接收权”三个独立环节——每个环节都有自己的守门人，漏掉任何一个，整个链路就断了。
