draggable="true" 不能直接加在 <input>、<select> 等原生表单控件上，浏览器会静默忽略；必须用语义化容器（如 <li> 或 <div class="field-container">）包裹，绑定拖拽逻辑，并通过 closest('.field-container') 精确处理 drop 位置，同时维护独立 schema 数组实现结构化导出。
直接给结论：draggable="true" 不能加在 <input>、<select> 这类原生表单控件上——浏览器会静默忽略，拖拽根本不会触发。必须用容器包裹，再把拖拽逻辑绑在容器上。
为什么 <input draggable="true"> 无效
Chrome 和 Firefox 默认禁用表单控件的拖拽源行为，这是出于安全和渲染一致性考虑。即使你写了 ondragstart，事件也不会冒泡上来，dataTransfer 也设不进去。常见现象是：鼠标按住不动、光标没变、松手后毫无反应。
真正起作用的是语义化容器（比如 <li> 或 <div class="field-item">），它不参与表单提交，只负责承载和转发。
- 所有可拖拽项必须是独立容器，内部用
<label>包裹控件，控件本身加disabled防误触 - 容器上设置
draggable="true"和唯一id，例如<li draggable="true" id="text-field"> - 不要在
dragstart里调用cloneNode()—— 此时 DOM 还没离开原位，克隆的是“将动未动”的状态，容易带入残留事件
drop 时怎么插入新字段才不乱序
用户拖到画布中间某两个字段之间，你得知道该插在前面还是后面。靠 ev.target 直接取元素不可靠——它可能是 <label>、<input>，甚至空白区域。
立即学习“前端免费学习笔记（深入）”；
正确做法是向上找最近的字段容器，再用 insertBefore() 精确控制位置：
formFields.addEventListener('drop', (ev) => {
ev.preventDefault();
const type = ev.dataTransfer.getData('text/plain');
const newItem = createFieldElement(type); // 根据 type 创建新节点
const dropTarget = ev.target.closest('.field-container'); // 找到最近的字段容器
if (dropTarget && dropTarget !== newItem) {
formFields.insertBefore(newItem, dropTarget);
} else {
formFields.appendChild(newItem);
}
});
-
closest('.field-container')是关键，确保你总拿到一个字段级容器，而不是子元素 - 插入前要判断
dropTarget !== newItem，避免自己插自己（比如刚拖进来就立刻再拖） - 别用
innerHTML += ...拼接，会清空已有事件监听器和用户已填的值
如何让拖进来的字段能改 label 而不崩
用 contenteditable="true" 给 <label> 加编辑能力，看似简单，实则埋雷：回车变换行、粘贴带样式、失焦不触发保存、光标跳到奇怪位置……因为 contenteditable 没有 input 事件，也不提供 value 属性。
稳妥做法是双击 label 弹出临时 <input type="text"> 覆盖层，失焦时同步更新：
- 双击事件绑定在 label 上，动态创建
<input>并 focus -
blur时读取它的value，写入对应字段的 schema，并更新 label 的textContent - 务必清除旧的
dataset.fieldId再设新值，防止 ID 冲突或重复引用 - 不要让用户手动改 HTML
id属性——用dataset.fieldId存 ID，和 DOM id 分开管理
JSON 导出为什么不能遍历 form.querySelectorAll("input")
因为导出的不是“当前填了什么”，而是“这个表单长什么样”——即结构定义。遍历 DOM 只能得到此刻的 value，拿不到 placeholder、required、校验规则、字段顺序，更无法还原多选框选项列表。
真正该维护的是独立的 schema 数组，每次添加/修改字段都只操作它：
const schema = [
{
"type": "text",
"id": "field_1723456789",
"label": "姓名",
"required": true,
"placeholder": "请输入真实姓名"
}
];
- 每个字段元素必须带
data-field-id="field_1723456789"，方便 DOM ↔ schema 双向查找 - 导出按钮只做一件事：
JSON.stringify(schema) - 验证、提交、预览都基于
schema渲染和驱动，而不是反向解析页面上的 input 标签
最容易被忽略的一点：字段 ID 必须在 drop 时生成，而不是在拖拽开始时生成——否则多个相同组件（比如两个文本框）会共用一个 ID，导致 schema 更新错乱、事件绑定冲突、导出 JSON 字段覆盖。
