原生拖拽表单构建器需容器化拖拽源、结构化数据管理、精准插入逻辑和防崩编辑机制：用 draggable 容器包裹禁用控件，drop 时 closest 查找目标并 insertbefore 插入，维护 schema 数组驱动渲染与导出，编辑字段属性时不重置输入值。
直接用原生拖拽 API 构建表单构建器，关键不是堆功能，而是让拖拽“稳、准、可编辑”。核心在于：容器化拖拽源、结构化数据管理、精准插入逻辑、防崩的编辑机制。
必须用容器包裹控件，不能直接设 draggable="true" 在 input 上
浏览器（Chrome/Firefox）默认禁用 、、 等原生控件的拖拽源行为。即使写了 draggable="true" 和 ondragstart，事件也不会触发，dataTransfer 也设不进去——光标不变、按住无反应、松手没效果。
正确做法是：
- 每个可拖拽字段用语义化容器包裹，例如
<div class="field-item" draggable="true" id="text-field"> <li>容器内用 <code><label></label>包裹控件，控件本身加disabled防止误触和焦点干扰 - 所有拖拽逻辑（
dragstart、dragend）都绑定在容器上，而非内部表单元素 - 在
drop事件中调用ev.target.closest('.field-container') - 用
insertBefore(newItem, dropTarget)精确插入到目标容器之前 - 插入前判断
dropTarget !== newItem，防止自己插自己 - 如果没找到有效容器（比如拖到画布空白处），就用
appendChild()追加到底部
drop 时精准插入，避免顺序错乱
用户把新字段拖到两个已有字段中间，你得知道该插在前还是后。不能靠 ev.target 直接取元素——它可能是 <label></label>、<span></span>，甚至空白文本节点。
可靠方案是向上查找最近的字段容器：
导出结构化数据，而不是拼 HTML
每次拖入/排序后，不要用 innerHTML += 拼接字符串——这会清空已绑定的事件监听器、丢失用户已填的值、破坏 Vue/React 的响应式链。
应该维护一个独立的 schema 数组，例如：
[
{ type: 'text', label: '姓名', required: true, name: 'name' },
{ type: 'email', label: '邮箱', name: 'email' }
]
渲染时由这个数组驱动 DOM；导出时直接序列化该数组，支持 JSON 导出、保存、回填、跨端复用。
支持实时编辑字段属性，且不重置状态
用户拖入一个文本框后，要能双击改 label、设必填、调宽度——但不能导致整个字段重新渲染而清空输入内容（尤其在预览模式下已有用户填写时）。
实现要点：
- label 文本用
contenteditable或独立编辑框控制，更新时只修改 DOM 文本节点，不替换整个字段元素 - 字段配置（如 required、placeholder）存在 schema 中，DOM 渲染时从 schema 同步，但输入值保留在原
<input>元素上 - 避免用
v-html或innerHTML动态重写字段区域
