Bootstrap本身不提供拖拽排序功能，其样式由Bootstrap控制，拖拽行为需依赖SortableJS、jQuery插件（如dragsort）或原生Drag & Drop API实现，并需手动处理事件监听、DOM更新及后端同步。
Bootstrap 本身不提供拖拽排序功能
Bootstrap 是一个 CSS 框架，bootstrap.js 里没有 sortable、dragula 或原生 DragEvent 封装逻辑。你看到的“Bootstrap 拖拽排序列表”，实际是 Bootstrap 负责样式（如 .list-group、.card），拖拽行为由其他库或原生 API 实现。
直接在 Bootstrap 列表上加 draggable="true" 不会自动排序——浏览器只触发基础事件，你需要手动监听 dragstart、dragover、drop 并更新 DOM 顺序。
用 SortableJS + Bootstrap 最省事
SortableJS 是轻量、无依赖、支持触摸的排序库，和 Bootstrap 的 class 完全兼容。它不改写你的 HTML 结构，只操作 Element 顺序，样式仍由 Bootstrap 控制。
- 引入方式：通过 CDN 加载
Sortable.min.js，无需 npm 或构建工具 - 初始化时传入容器元素，指定
handle可选（比如只允许拖拽卡片右上角的.drag-handle） - 避免给列表项加
transform或transition，否则拖拽中视觉错位常见 - 如果列表项含
form或input，注意Sortable默认会禁用聚焦；需设置preventOnFilter: false并确保filter规则准确
示例初始化：
new Sortable(document.getElementById('myList'), {
animation: 150,
ghostClass: 'bg-light',
handle: '.drag-handle'
});
原生 drag & drop 在 Bootstrap 列表里容易出错的地方
原生方案看似“不用额外库”，但细节多到容易翻车。尤其当列表项是 .list-group-item 或嵌套了 .d-flex 布局时，dragover 默认被阻止，drop 事件根本不会触发。
- 必须在
dragover回调里显式调用event.preventDefault()，否则无法触发drop -
dataTransfer.setData()只支持"text/plain"或"text/html"，不能传对象；推荐用dataTransfer.effectAllowed = "move"配合dataTransfer.dropEffect = "move"明确意图 - 用
Array.from(ol.children)获取当前顺序比遍历childNodes更可靠，后者可能包含文本节点 - 移动端 Safari 对原生 drag API 支持极差，iOS 上基本不可用
后端同步排序序号时别漏掉更新逻辑
前端拖拽只是 UI 变化，真正持久化需要把新顺序发给后端。常见错误是只传 ID 数组，却没在后端做校验或事务保护。
- 前端发送类似
{ item_ids: ["item-3", "item-1", "item-2"] }，后端应按此顺序更新每条记录的sort_order字段 - 避免用
UPDATE ... SET sort_order = ? WHERE id = ?单条执行——并发拖拽可能导致序号冲突；建议用事务 + 一次批量更新（如 PostgreSQL 的VALUES+UPDATE ... FROM） - 如果后端返回 409 Conflict（比如检测到版本冲突），前端应重新拉取列表，而不是静默失败
最易被忽略的是：拖拽过程中用户快速连续操作，前端可能发出多个排序请求，但后端未做防重或排队，导致最终状态错乱。
