Bootstrap表单本身不支持拖拽排序，需借助HTML5 Drag and Drop API或SortableJS等外部方案实现；关键在于绑定drag事件、阻止默认行为、动态调整DOM顺序，并注意移动端降级和状态同步。
Bootstrap 表单本身不支持拖拽排序
Bootstrap 的 form 组件（包括 form-control、form-group 等）只负责样式和基础布局，没有任何内置的拖拽（drag-and-drop）逻辑。想让表单项（比如多个 <div class="mb-3"> 包裹的输入框）可拖拽重排，必须引入外部交互能力。
用 HTML5 Drag and Drop API + Bootstrap 类名是最轻量方案
不需要额外 UI 库，纯原生 JS 就能实现。关键是把拖拽事件绑定到每个表单项容器（如 <div class="form-row"> 或自定义的 <div class="sortable-item">），并用 insertBefore 或 appendChild 动态调整 DOM 顺序。
常见错误现象：dragstart 没设置 dataTransfer.setData，导致 drop 时拿不到源元素；或者没阻止 dragover 默认行为，导致无法触发 drop。
- 给每个可拖拽项加
draggable="true"属性 - 在
dragstart中保存当前元素的索引或引用（推荐存dataset.id） -
dragover必须调用event.preventDefault()，否则drop不会触发 - 在
drop里用target.closest(".sortable-item")定位目标容器，再用before()或insertAdjacentElement()插入 - 保持 Bootstrap 的间距类（如
mb-3）不被拖拽过程破坏——建议只对包裹容器启用拖拽，内部input、label不设draggable
使用 SortableJS 时要注意表单控件状态丢失
如果选用 SortableJS（常用且稳定），它默认会移动整个 DOM 节点。但若表单项里有用户已输入的内容（比如 <input value="xxx">）、勾选的 <input type="checkbox">，或通过 JS 绑定的事件监听器，直接移动节点可能导致：
- 输入框的
value属性没变，但 Vue/React 状态未同步（如果是框架内使用） - 原生
change、input事件监听器失效（因为节点被移走再插入，监听器未自动重绑） - Bootstrap 的
form-check样式错位（因for和id关联断裂）
解决办法：启用 SortableJS 的 store 插件做数据层同步，或改用 onEnd 回调手动保存/恢复状态；更稳妥的是，只用它管理一个 ID 列表，渲染由框架控制（如 React 的 key 配合数组索引）。
移动端拖拽体验差，必须降级为点击排序
HTML5 dragstart 在 iOS Safari 和部分安卓浏览器中不可靠，长按可能触发系统菜单或文字选择。不能假设“加了 draggable 就能拖”。
真实使用场景下，应检测 'ontouchstart' in window 或用 matchMedia('(hover: none)') 判断是否为触屏设备，然后：
- 隐藏拖拽手柄（如右侧
<i class="bi bi-grip-vertical"></i>） - 显示上下移动按钮（
<button type="button" data-move="up">↑</button>） - 点击按钮时调用同一套 DOM 移动逻辑（复用
moveItem(fromIndex, toIndex)函数） - 避免在移动端监听
drag相关事件，防止干扰默认滚动
复杂点在于状态同步和 DOM 更新时机——尤其是当表单项含异步校验或动态加载内容时，拖拽后要确保所有关联逻辑重新评估，而不是只动了个位置就完事。
