原生html实现可拖拽模块化组件需闭环三件事：拖拽源用setdata()传结构化json数据、投放区在dragover和drop中均preventdefault()并设dropeffect、dom插入逻辑与状态分离——漏任一环将导致静默失败。
原生 HTML 实现可拖拽模块化组件，核心不是“加个 draggable="true" 就完事”，而是三件事必须闭环：拖拽源正确携带结构化数据、投放区主动开门许可、DOM 插入逻辑与状态分离。漏掉任意一环，都会出现“看似能拖、松手就回弹”或“拖进去了但没反应”的静默失败。
dragstart 里必须调 dataTransfer.setData()，且不能传对象
浏览器只允许拖拽图片、链接和选中文本；普通 <div> 要能拖，<code>dragstart 中必须调用 setData()，哪怕只是空字符串——否则 Chrome/Safari 直接静默忽略，控制台零报错。
-
setData()第二个参数只能是字符串，传{ type: "button" }会变成"[object Object]"，取出来无法解析 - 推荐用
"application/json"类型 +JSON.stringify()序列化，比如：e.dataTransfer.setData("application/json", JSON.stringify({ type: "input", props: { placeholder: "请输入" } })) - 别用
"text/plain"传中文或嵌套结构，Safari 容易截断或乱码 - 每个可拖项 DOM 上建议带
data-component-type="input"和data-preview-html，避免 JS 里写死if (id === "btn")判断
drop 区必须同时阻止 dragover 和 drop 的默认行为
drop 事件根本不会触发，除非 dragover 阶段已明确告诉浏览器“这里允许放置”。这是最多人卡住的点：只在 drop 里写 preventDefault()，dragover 却没拦，结果整个投放流程被浏览器拦截。
-
dragover处理函数里必须有e.preventDefault()，且建议同步设e.dataTransfer.dropEffect = "move"，影响光标样式和 drop 可用性 -
drop里也得写e.preventDefault()，再用JSON.parse(e.dataTransfer.getData("application/json"))拿数据 - 如果投放区是滚动容器（如侧边栏面板），监听器必须挂载在最外层根节点，用事件委托，别绑在内部子项上——滚动后子项可能被重绘，监听丢失
- 避免在
dragover里频繁调getBoundingClientRect()或修改样式，容易卡顿；可用requestAnimationFrame节流
插入组件不能只 appendChild，要维护独立状态数组
直接操作 DOM 插入元素，短期看着行，但一旦涉及撤销、持久化、跨 iframe 同步或服务端保存，就会崩。真实项目里，拖进画布的不是 DOM 节点，而是描述它的配置对象。
- 统一用一个数组（如
layout）存所有组件的{ type, props, id }，每次drop只往数组里 push 或 splice，再由渲染函数批量生成 DOM - 不要靠
innerHTML或outerHTML拼接，防止 XSS；用data-preview-html属性做预览，实际插入走模板函数或document.createElement() - 如果支持排序（如列表拖拽），计算插入位置时别只看
e.target，要用e.clientY - target.getBoundingClientRect().top判断鼠标在目标内的相对位置，决定插到上方还是下方 - 拖拽结束（
dragend）后立刻清理临时 class（如dragging），并移除 document 级别的mousemove监听（如果是自研位移面板）
真正难的不是“怎么拖起来”，而是拖进去之后，组件有没有默认 props、状态是否可序列化、折叠/滚动/iframe 场景下事件是否持续有效——这些细节不提前想清楚，上线后第一波用户反馈就是“拖着拖着没了”。
