draggable="true"仅标记拖拽源并改光标，不触发拖拽逻辑；需javascript补全数据传递、dragover阻止默认行为等全部流程，且移动端原生不可用。
draggable="true"只是起点标记，不是拖拽开关
设了 draggable="true" 却没反应？这不是代码写错了，是误解了它的作用。它只做一件事：告诉浏览器“这个元素允许被当作拖拽源”，并让光标变成抓手样式；其余所有行为——数据传递、悬停反馈、投放生效——全得靠 JavaScript 补齐。
常见踩坑点：
-
draggable="auto"或draggable=""在 Chrome 和 Firefox 中表现不一致，务必写死为draggable="true" - 加在父容器上（比如
<ul draggable="true"></ul>），子项不会自动继承——必须加在实际要拖的那个元素上 -
<input>、<textarea></textarea>、<select></select>上硬塞draggable="true"无效，浏览器原生禁用 - 空
<div draggable="true"></div>没宽高/内边距，dragstart根本不触发
dragstart 必须调用 setData()，否则 drop 一定拿不到数据
dragstart 里漏掉 e.dataTransfer.setData()，整个拖拽链就断在起点。drop 时 e.dataTransfer.getData('text/plain') 一定返回空字符串，不是兼容性问题，是规范强制要求。
实操建议：
- 类型参数用
'text/plain'最稳；'Text'或自定义类型如'mydata'在 Firefox 中会静默失败 - 哪怕只传 ID，也要显式写：
e.dataTransfer.setData('text/plain', e.target.id) - 传结构化数据？先
JSON.stringify()再塞进去：e.dataTransfer.setData('text/plain', JSON.stringify({id: 't1', type: 'task'})) - 顺手设
e.dataTransfer.effectAllowed = 'move'，尤其 Safari 会据此调整光标提示
drop 不触发？八成是 dragover 没 preventDefault()
dragover 是唯一能解除浏览器“默认禁止投放”的事件，而且 e.preventDefault() 是硬性要求——写错位置、少调一次、用 e.stopPropagation() 或 return false 替代，都会导致 drop 完全不触发。
关键细节：
- 目标容器要是空
<div id="dropzone"></div>，记得加min-height: 24px或padding: 4px，否则鼠标根本进不去，连dragover都不会来 - 别忽略 CSS 干扰：
user-select: none或pointer-events: none会直接拦住dragstart，光标都不变 - Safari 对
effectAllowed和dropEffect匹配更敏感，建议在dragover回调里补一句：e.dataTransfer.dropEffect = 'move'
移动端原生 drag/drop 基本不可用
iOS Safari 和 Android Chrome 均不触发 dragstart、drop 等事件。这不是你代码的问题，是平台级缺失。拿桌面端逻辑直接跑在手机上，大概率卡顿或完全失效。
如果项目必须支持移动端拖拽：
- 别依赖
draggable属性和原生事件链 - 改用
touchstart/touchmove/touchend手动模拟，或引入interact.js这类兼容层库 - 对表单控件拖拽等复杂场景，更推荐用容器包裹 + 自定义拖拽逻辑，彻底绕开原生限制
最易被忽略的一点：很多人以为只要 dragstart 和 drop 写对了就行，其实 dragover 的 preventDefault() 调用频率、目标区域的可命中性、移动端的兜底方案，才是真正决定拖拽是否“可用”的分水岭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
