设了draggable="true"但拖不动，根本原因是普通元素需手动绑定dragstart并调用setdata()，且drop前必须在dragover中preventdefault()；移动端原生不支持。

设了 draggable="true" 但拖不动，基本是因为没写 dragstart 事件，或没在 dragover 里调 e.preventDefault()。

draggable="true" 只是开关，不是功能本身

它只告诉浏览器“这个元素允许被拖”，不触发任何默认行为，也不自动传数据。对 <div>、<code><span></span> 这类普通元素，必须手动绑定事件才能让拖拽真正工作。

• draggable="false" 能禁用图片、链接等原生可拖元素，但对 <input> 或 <textarea></textarea> 无效（浏览器强制禁用）
• 空字符串 draggable 等价于 true，但建议显式写 draggable="true" 避免歧义
• 移动端完全不支持原生 drag/drop API，这点必须提前确认场景

dragstart 必须调用 dataTransfer.setData()

不设数据，拖拽会静默失败——Chrome、Firefox、Safari 全部如此。控制台通常不报错，但 drop 事件根本不会触发。

• 至少写一行：e.dataTransfer.setData('text/plain', '')（空字符串也行）
• 传业务数据时推荐自定义类型，比如 'text/id' 或 'application/json'，避免和系统内置类型冲突
• 别在 dragstart 里漏掉 e.dataTransfer.effectAllowed = 'move'，否则某些浏览器可能限制投放效果

drop 不触发？先查 dragover 是否 preventDefault()

drop 能否触发，完全取决于上一个 dragover 事件是否被阻止默认行为。没阻止，浏览器就当“此地禁止投放”，光标变禁止符号，drop 直接丢弃。

html-to-pptx-converter

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

下载

• 只在目标容器上监听 dragover，并立刻调 e.preventDefault()，不需要做别的
• 别在 dragenter 里 preventDefault()——它控制“能否进入”，不影响“能否投放”
• 如果目标区域是动态生成的，记得给父容器委托监听，或确保事件绑定时机在元素挂载之后

drop 里取不到数据？检查 MIME 类型是否匹配

getData() 的参数必须和 setData() 时用的类型严格一致，大小写敏感，且不能依赖浏览器自动转换。

• 如果 setData('text/plain', 'abc')，就必须用 getData('text/plain')
• 用 'text/id' 这类自定义类型更安全，避免被浏览器拦截或覆盖
• 调试时可打印 e.dataTransfer.types 看实际有哪些类型可用

最容易被忽略的是：dragover 的 preventDefault() 必须在每次触发时都执行，不是只绑一次就行；另外，dataTransfer 对象只在拖拽生命周期内有效，drop 之后再访问会返回空或报错。