原生 html 拖拽需三步：设 draggable="true"、在 dragstart 中调用 setdata() 设置字符串数据、在 dragover 中调用 preventdefault() 允许投放；缺一不可，否则拖拽失效。

原生 HTML 的 drag 系列事件不是“开箱即用”的交互功能，它默认只对 <img>、<a></a> 和可选中文字生效；想拖拽任意元素（比如 <div>），必须手动设置 <code>draggable="true" 并拦截全部 7 个拖拽事件，否则什么也不会发生。

为什么 <div> 拖不动？ <p>浏览器默认禁止非媒体/链接元素的拖拽行为。即使加了 <code>draggable="true"，若没监听 dragstart 并调用 event.dataTransfer.setData()，拖拽会立即中断。

• draggable="true" 是必要但不充分条件，仅开启拖拽入口
• 必须在 dragstart 中至少设置一个 dataTransfer 类型，例如 event.dataTransfer.setData('text/plain', 'some-id')
• 漏掉 dragover 事件（且未调用 event.preventDefault()）会导致目标区域无法接收拖入
• Chrome/Firefox 对空 dataTransfer 的处理更严格，Safari 可能静默失败

dragover 和 drop 必须配对使用

drop 事件不会触发，除非目标元素持续允许被拖入——而这完全依赖 dragover 中是否阻止了默认行为。

html-to-pptx-converter

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

下载

• 只监听 drop 没用：浏览器会在每次悬停时取消拖拽上下文
• 必须在目标元素上监听 dragover，并在回调中写 event.preventDefault()
• 如果还要显示拖拽反馈（如高亮边框），建议同时监听 dragenter 和 dragleave 控制样式
• dataTransfer.dropEffect 和 effectAllowed 仅影响光标图标，不影响逻辑，可暂不设

如何传数据？dataTransfer 的实际限制

dataTransfer.setData() 不是万能剪贴板：它只支持字符串值，且跨源 iframe 或不同协议页面间基本失效。

• 只能传字符串，复杂对象需 JSON.stringify() 后再 set，接收端再 JSON.parse()
• 类型标识（第一个参数）建议用 'text/plain' 或 'application/json'，避免自定义类型导致兼容问题
• getData() 必须用和 setData() 完全一致的类型字符串，大小写敏感
• 不要依赖 dataTransfer.files 传非文件数据——它只在真正拖入文件时有值

最易被忽略的是：dragstart 里没设数据、dragover 里忘了 preventDefault、以及以为 draggable="true" 就万事大吉——这三个点卡住 90% 的初学者。