draggable="true"仅是拖拽起点标记，不配事件监听、不调setdata()、不在dragover中preventdefault()，拖拽必然失败；必须显式绑定dragstart、设置数据、阻止默认行为且目标需持续拦截dragover。

draggable="true"只是个开关，不配事件、不传数据、不阻止默认行为，拖拽必然失败。

dragstart 为什么没触发？

光标变手形 ≠ dragstart 被调用。浏览器不会自动绑定事件，必须显式注册。

• draggable="true" 必须写在被拖元素上（比如 <div draggable="true">），<code><input> 或 <textarea></textarea> 加了也无效
• 必须用 addEventListener('dragstart', ...) 或内联 ondragstart；只设属性不写监听，事件根本不会来
• event.dataTransfer.setData('text/plain', 'some-id') 必须在 dragstart 回调里执行；类型建议用 'text/plain' 或 'text/html' —— 自定义类型如 'mydata' 在 Firefox 中会静默失败
• 空 <div> 没宽高时，浏览器判定“不可交互”，<code>dragstart 不触发；加 min-height: 24px 或 padding: 4px 就能解决
• 检查是否被样式拦住：user-select: none 或 pointer-events: none 会让 mousedown 都失效，dragstart 更不可能触发

drop 为什么完全不执行？

90% 的原因是 dragover 没拦住浏览器默认拦截逻辑。它不是可选步骤，而是硬性前提。


html-ppt-to-pdf
将使用 `
` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。
下载
• 目标容器必须监听 dragover，且回调中必须调用 e.preventDefault() —— e.stopPropagation()、return false 都不行
• 只监听 drop 是无效的；浏览器在 dragover 阶段就决定是否允许投放，没 preventDefault()，drop 根本不会派发
• 目标容器若为空 <div>，确认它没被 <code>display: none 或 visibility: hidden 隐藏，否则无法命中
• Safari 对 effectAllowed 和 dropEffect 匹配更敏感：建议在 dragstart 里设 e.dataTransfer.effectAllowed = 'move'，在 dragover 里设 e.dataTransfer.dropEffect = 'move'

移动端拖拽为什么失效？

iOS Safari 和 Android Chrome 均不触发 dragstart/drop 等事件。draggable="true" 在移动端基本是摆设。

• 这不是兼容性问题，是平台级限制；别直接照搬桌面代码
• 需降级为 touchstart/touchmove/touchend + CSS transform 手动模拟
• 或引入轻量库如 interact.js 或 sortablejs，它们内部已做平台兼容处理
• 若坚持用原生 API，至少检测 'ontouchstart' in window 并切换为点击+长按激活模式

drop 里 event.target 不是你绑事件的容器？

drop 事件中的 event.target 可能是子元素（比如你拖到一个带文字的 <div>，<code>target 反而是里面那个 <span></span>），不是你绑定事件的容器本身。

• 别依赖 event.target 做业务判断；用 event.currentTarget 才是你监听的容器
• 如果需要获取被拖元素 ID，应从 dataTransfer.getData('text/plain') 拿，而不是靠 DOM 层级推断
• 如果要支持嵌套结构，drop 处理逻辑里最好用 closest('.drop-zone') 向上找容器，而不是信任 event.target

最常被忽略的是：dragover 不仅要存在，还必须每次触发都 preventDefault()；哪怕只漏一次，整个 drop 流程就断了。这个细节在调试时很难定位，因为控制台不报错，只是“静默失败”。