draggable="true"仅启用拖拽许可，必须绑定dragstart事件、设置dataTransfer数据、在dragover中调用preventDefault()三者缺一不可，否则拖拽静默失败。

加了 draggable="true" 元素还是拖不动？不是属性写错了，而是整个拖拽链路里至少缺了一环：事件没绑、dataTransfer 没设、dragover.preventDefault() 没调——这三处任一缺失，拖拽就静默失败。

draggable="true" 只是开关，不等于能拖能放

draggable 属性本身不触发任何行为，它只告诉浏览器“这个元素允许被鼠标抓取”。img 和 a 标签默认就是 draggable="true"，但 div、span 等普通元素默认是 draggable="false"。设成 draggable="true" 后，你只会看到光标变拖拽样式，仅此而已。

• 必须用 addEventListener('dragstart', ...) 或内联 ondragstart 显式绑定事件，仅设属性不会注册监听器
• draggable 写成 draggable（无值）在 Safari 和部分旧版 Chrome 中不生效，必须显式写 draggable="true"
• input、textarea 即使设 draggable="true" 也无效，浏览器强制禁用其拖拽能力

dragstart 不触发？检查这三件事

这是最常卡住开发者的环节。即使 draggable="true" 正确，dragstart 仍可能完全不执行。

• 元素是否为空且无尺寸？比如空 <div id="source" draggable="true"></div>，需加 min-height: 20px 或内容撑开，否则浏览器判定“不可交互”，连事件都不派发
• 是否被样式拦截？user-select: none 或 pointer-events: none 会让 mousedown 失效，dragstart 自然不会触发
• event.dataTransfer.setData() 是否在 dragstart 回调里调用了？至少传一个有效类型，如 text/plain；Chrome/Firefox 若检测不到数据，会直接拒绝启动拖拽流程

drop 事件总不执行？核心就一条

drop 是整个链路里最脆弱的一环，90% 的“松手没反应”都源于这个错误：目标元素的 dragover 事件中没调 event.preventDefault()。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

立即学习“前端免费学习笔记（深入）”；

• 只写 event.stopPropagation() 没用，浏览器照样拦掉投放
• 如果目标容器是空 div，还要确认它没被 display: none 或 visibility: hidden 隐藏，否则无法命中
• Safari 对 dataTransfer.effectAllowed 和 dropEffect 匹配更敏感，建议在 dragstart 设 e.dataTransfer.effectAllowed = 'move'，在 dragover 设 e.dataTransfer.dropEffect = 'move'

移动端不支持，别白费力气

原生 drag/drop API 在所有主流移动端浏览器中均不支持——这不是兼容性问题，是规范层面未定义。iOS Safari、Android Chrome 都不会触发 dragstart 或 drop。

• 想在移动端实现类似效果，必须用 touchstart/touchmove/touchend 模拟，或引入 interact.js 等库
• 不要试图用 draggable="true" + CSS cursor: grab 来“假装”支持，用户点下去根本没响应
• 若项目需跨端一致体验，建议服务端统一处理排序逻辑，前端只做视觉反馈，避免强依赖原生拖拽

真正容易被忽略的是：拖拽不是单个属性的事，而是一组事件协同工作的状态机。漏掉任何一个环节，整条链路就断在半路。尤其是 dragover.preventDefault() 这一行，看着简单，却是整个流程能否落地的关键分水岭。