HTML5 拖拽 API 可支撑轻量级图形编辑器核心交互，但需严格遵循事件链：拖拽源须设 draggable="true" 并在 dragstart 中调用 setData()；目标区域必须在 dragover 中 preventDefault() 才能触发 drop；drop 时需解析数据、更新状态并 clearData()；还需兼容文件拖入与移动端降级。
HTML5 拖拽 API 可以支撑轻量级图形编辑器的核心交互，比如图层排序、元素归位、组件拖入画布等场景。它不依赖框架，原生稳定，但需严格遵循事件链和数据传递规则，否则会出现“能拖不能放”“拖影异常”“跨区域失效”等问题。
拖拽源必须显式启用并设置数据
所有可拖动图形元素（如矩形、图标、文本块）都需添加 draggable="true" 属性。仅设属性还不够——dragstart 事件中必须调用 event.dataTransfer.setData()，哪怕只传一个空字符串或唯一 ID：
- 不调用 setData()，浏览器会静默取消拖拽，松手无反应，控制台也无报错
- 推荐 MIME 类型为 "application/json"，便于传结构化数据，例如：
e.dataTransfer.setData("application/json", JSON.stringify({ type: "rect", id: "layer-3", x: 100, y: 50 })); - 可选：用 setDragImage() 替换默认拖影，例如绘制一个半透明缩略图 canvas，提升视觉一致性
目标区域要主动“打开接收通道”
画布容器、图层面板、工具栏等放置目标，不能只监听 drop 事件。关键一步是：在 dragover 中调用 event.preventDefault() —— 这是浏览器允许 drop 触发的硬性前提：
- 漏掉这句，drop 永远不会触发，这是最常见失败原因
- 建议同时监听 dragenter/dragleave，用于添加/移除高亮样式（如 border: 2px dashed #4a90e2）
- 若目标区域嵌套较深（如 div > section > canvas），确保事件不被父级意外拦截，可用 e.stopPropagation() 控制冒泡范围
drop 时解析数据并更新状态
drop 事件中需取出数据、校验类型、执行对应逻辑，而非直接操作 DOM：
立即学习“前端免费学习笔记（深入）”；
- 先 e.preventDefault() 防止浏览器默认行为（如打开图片、跳转链接）
- 用 e.dataTransfer.getData("application/json") 解析原始拖拽信息
- 根据 type 字段区分是“新建图形”还是“移动图层”，再更新全局状态数组或 Vue/React state
- 完成插入或重定位后，清空 dataTransfer（
e.dataTransfer.clearData()），避免重复提交或状态残留
兼顾文件拖入与降级兼容
专业图形编辑器常需支持本地图片/SVG 文件拖入画布预览：
- 在 drop 事件中检查 e.dataTransfer.files，过滤 image/* 或 svg+xml 类型
- 用 FileReader 转 base64 实现即时预览，再生成图形对象加入状态管理
- 移动端不支持原生 drag & drop，务必保留 <input type="file"> 作为降级入口，并统一处理文件逻辑
- Safari 对某些 MIME 类型（如 application/json）支持较弱，可 fallback 到 text/plain + JSON.parse() 安全兜底
