原生 HTML 拖拽需三步：设 draggable="true"、在 dragstart 中调用 setData() 设置字符串数据、在 dragover 中调用 preventDefault() 允许投放；缺一不可，否则拖拽失效。
原生 HTML 的 drag 系列事件不是“开箱即用”的交互功能，它默认只对 <img>、<a> 和可选中文字生效；想拖拽任意元素（比如 <div>），必须手动设置 draggable="true" 并拦截全部 7 个拖拽事件，否则什么也不会发生。
为什么 <div> 拖不动？
浏览器默认禁止非媒体/链接元素的拖拽行为。即使加了 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% 的初学者。
