原生拖放需同时满足三要素：元素设draggable="true"、dragstart中调setdata()并阻止默认行为、dragover中必须preventdefault()；移动端不支持，需降级方案。
设了 draggable="true" 却拖不动、松手没反应、drop 事件压根不触发——这不是浏览器 bug，是原生拖放链断在了某个环节。必须配齐三件事：属性标记、数据写入、默认行为拦截，缺一不可。
draggable="true" 写在哪？常见位置错误
这个属性只对被拖元素本身生效，不继承、不穿透、不兜底。
-
draggable="true"必须直接写在要拖的元素上，比如<li draggable="true">Item</li>；写在父容器（如<ul></ul>）上，子项不会自动获得拖拽能力 -
<input>、<textarea></textarea>、<button></button>这类表单控件，即使加了draggable="true"，浏览器也会强制忽略——这是规范限制，不是代码问题 - 空
<div draggable="true"></div>不会触发dragstart，因为没有渲染尺寸；至少加min-height: 24px或padding: 4px - 别写成
draggable="auto"或draggable=""，Chrome 和 Firefox 行为不一致；严格用draggable="true"
dragstart 里必须调 dataTransfer.setData()
没这一步，整个拖拽流程从起点就断掉。浏览器清空剪贴板后，后续所有 getData() 都返回空字符串。
- type 参数优先用
'text/plain'，兼容性最稳；'Text'或自定义类型如'mydata'在 Firefox 中会静默失败 - 值必须是字符串：传 ID 就写
e.dataTransfer.setData('text/plain', e.target.id)；传结构化数据得先JSON.stringify()，再塞进去 - 顺手加一句
e.dataTransfer.effectAllowed = 'move'，尤其 Safari 依赖这个控制光标样式 - 别漏掉事件监听本身：只设属性不绑
addEventListener('dragstart', ...)，回调根本不会执行
drop 不触发？八成是 dragover.preventDefault() 没写对
浏览器默认禁止投放，dragover 是唯一能打开“闸门”的事件，且 e.preventDefault() 是硬性要求。
- 只监听
drop没用，dragover必须存在，且回调里必须写e.preventDefault()——e.stopPropagation()或return false都不行 - 目标容器要是空
<div id="dropzone"></div>，记得加min-height: 24px或padding: 4px，否则无法命中 - 别忽略样式干扰：
user-select: none或pointer-events: none会直接拦住dragstart，连光标都不变 - Safari 对
effectAllowed和dropEffect匹配更敏感，建议在dragover里补一句：e.dataTransfer.dropEffect = 'move'
移动端原生 drag/drop 基本不可用
iOS Safari 和主流 Android 浏览器均不触发 dragstart、drop 等事件。这不是兼容性问题，是平台级限制。
- 别尝试用
touchstart+transform手动模拟原生拖拽逻辑——性能差、手势冲突多、滚动卡顿明显 - 真要支持移动设备，优先降级为点击+长按激活模式，或引入
SortableJS、interact.js这类已做平台适配的库 - 检测方式很简单：
'ontouchstart' in window为 true 时，直接跳过原生 drag/drop 初始化
最易被忽略的是：dragover 和 drop 两个事件的 preventDefault() 必须各自独立写，不能只靠一个；还有目标容器若塌陷无高度，拖进去就像打在空气上——这些细节不显眼，但决定拖拽到底能不能落下去。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
