直接用 dragstart 写拖放易出错，因需手动处理 draggable 属性、dataTransfer.setData、dragover 阻止及 MIME 类型匹配；自定义元素可封装生命周期、自动处理事件与数据解析，提升复用性与健壮性。
为什么直接用 dragstart 事件写拖放容易出错
原生拖放 API 表面简单，实际埋了几个坑：拖拽源必须设置 draggable="true"，dragstart 里不调用 event.dataTransfer.setData() 就没数据、目标元素默认不响应 drop（因为 dragover 被浏览器阻止）、dataTransfer 的 MIME 类型写错就拿不到值。更麻烦的是，这些逻辑一旦分散在多个组件里，复用和测试都难。
customElements.define() 怎么封装拖放行为
用自定义元素把拖放生命周期收束到一个类里，关键不是“看起来高级”，而是把重复的 preventDefault、setData、事件监听打包。比如定义 <draggable-item> 和 <drop-zone> 两个元素：
-
draggable-item在 connectedCallback 里自动加draggable="true"，并监听dragstart，只暴露getData方法让你返回要传的数据（不用管dataTransfer） -
drop-zone自动处理dragover和drop，触发drop自定义事件，detail 里带dataTransfer解析后的值（自动尝试text/plain和application/json） - 两者都支持
data-type属性声明数据类型，避免手动写 MIME 字符串
示例：
<draggable-item data-type="task" getData='() => ({ id: 123, title: "Fix bug" })'>拖我</draggable-item><br><drop-zone ondrop="console.log(event.detail)">扔这儿</drop-zone>
dataTransfer.getData() 拿不到值？检查这三个地方
即使封装了，还是常遇到 getData() 返回空字符串——这不是你代码写错了，而是浏览器策略卡的：
Html To Pdf
下载
使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。
立即学习“前端免费学习笔记（深入）”；
- 拖拽源必须是用户手势触发（比如鼠标按下），JS 主动 dispatch
dragstart会被忽略 -
dataTransfer.setData("text/plain", ...)和getData("text/plain")的 MIME 类型必须完全一致（大小写敏感，Text/Plain≠text/plain） - 如果用了
application/json，值必须是字符串（JSON.stringify(obj)），不能直接传对象
自定义元素里怎么处理跨域或 iframe 拖放
原生 API 对跨域限制很死：iframe 内容拖进主页面时，dataTransfer.items 是空的，且无法读取 files。这时候别硬扛：
- 放弃
dataTransfer，改用 postMessage 协作：拖拽开始时 iframe 向 parent 发消息，parent 记录拖拽状态；drop 时再由 parent 主动向 iframe 请求数据 - 自定义元素里加
allow-iframe属性，内部自动绑定 message 事件，但必须双方约定好消息格式（比如{ type: "drag-start", payload: { id: "file-789" } }） - 不要试图在
drop事件里同步读取 iframe 内容——它根本不会给你数据
真正麻烦的从来不是怎么写 drag/drop，而是怎么让不同上下文之间信任地交换信息。封装只是省掉样板代码，边界问题还得靠设计兜住。
