用纯HTML+JS实现可拖拽表单生成器，需分离拖拽区与画布、抽象字段为配置对象、动态创建元素并绑定事件、维护独立schema数据结构用于JSON导出，禁止直接操作innerHTML或读取DOM值生成JSON。
怎么用纯 HTML + JavaScript 实现一个可拖拽的表单生成器
不能只靠 <form> 和 <input> 硬写——得有状态管理、组件注册、DOM 动态插入和字段配置联动。核心是把每个表单控件（如 text、select、checkbox）抽象成可复用的配置对象，再用 JS 控制渲染与数据收集。
常见错误是直接操作 innerHTML 拼接字符串，导致事件丢失、value 同步失败、无法响应式更新。正确做法是用 document.createElement 创建元素，显式绑定 input / change 事件，并把字段 ID 和配置存进 dataset。
- 每种字段类型必须预设默认配置，比如
text字段默认带placeholder和required: false - 拖拽区域（左侧组件栏）和画布（右侧表单区）要分离 DOM 结构，避免事件冒泡干扰
- 不要在拖拽
start时 cloneNode，而应在drop时按配置 new 元素——否则会带入旧事件监听器或残留 state
如何让生成的表单支持实时 JSON 导出
导出不是“把 DOM 转成 JSON”，而是维护一份独立于 UI 的 schema 数据结构。每次添加字段，就往数组里 push 一条配置对象；每次修改 label 或 required，就更新对应项的 label 或 required 字段。
容易踩的坑：直接读取 input 元素的 value 去拼 JSON——这只能拿到当前值，不是字段定义。正确字段定义长这样：
立即学习“前端免费学习笔记（深入）”；
{
"type": "text",
"id": "field_1723456789",
"label": "姓名",
"required": true,
"placeholder": "请输入真实姓名"
}
导出函数只需返回这个数组，不碰 DOM。验证逻辑、提交处理都基于它，而不是反向解析页面上的 input 标签。
- 给每个字段元素加
data-field-id="field_1723456789"，方便后续通过 ID 反查 schema - 禁用用户手动修改
id属性——用dataset.fieldId存，防止和 HTML id 冲突 - JSON 导出按钮触发的是
JSON.stringify(schema)，不是form.querySelectorAll("input").forEach(...)
为什么用 contenteditable 改 label 会出问题
很多简易生成器让 label 可编辑，用 contenteditable="true"，结果发现：回车换行、粘贴富文本、光标错位、失去焦点后没保存……根本原因是它不是表单控件，不触发 input 或 change 事件，也没有 value 属性。
更稳的做法是双击 label 弹出 <input type="text"> 覆盖层，失焦时把值写回 schema 并更新 DOM 文本节点。
- 别监听
blur就立即更新——先校验非空，再更新schema.find(f => f.id === targetId).label - 覆盖层 input 宽度要动态匹配原 label 宽度（用
getBoundingClientRect()），不然会错位 - 移动端双击难触发，建议加个铅笔图标按钮替代双击逻辑
怎样让生成的表单能被后端真正用起来
前端生成的 JSON schema 必须符合后端可解析的结构，否则导出只是玩具。关键点不在“能生成”，而在“生成的东西能跑通完整链路”。
例如后端 expect 的字段结构可能是：
{
"fields": [{
"name": "user_name",
"type": "string",
"required": true,
"label": "姓名"
}]
}
那你的前端 schema 就不能叫 id，得映射成 name；type: "text" 得转成 type: "string"；且所有字段 name 必须唯一、合法（只能含字母数字下划线）。
- 导出前做一次校验：检查是否有重复
name、是否含非法字符、是否缺失label - 不要让用户自己填 name——自动生成
field_${Date.now()}_${Math.random().toString(36).substr(2, 5)}，再提供编辑入口 - 如果后端用 Formik / Zod / Django Forms，schema 导出格式就得适配它们的 DSL，不是自由发挥
真正麻烦的从来不是“怎么画出来”，而是字段语义怎么对齐、校验规则怎么透出、空值怎么表示、多选怎么序列化——这些细节不提前约定，JSON 导出来也没人敢接。
