Bootstrap表格本身不支持行拖拽动画，需借助SortableJS等第三方库配合CSS过渡实现，关键在于tbody显式设min-height、tr添加transform/opacity过渡、避免table-responsive裁剪ghost元素。
Bootstrap 表格本身不支持行拖拽动画
Bootstrap 的 table 组件只是样式框架，没有内置拖拽逻辑或动画能力。所谓“行拖拽动画”，实际是靠浏览器原生 drag and drop API 或第三方库（如 SortableJS）实现交互，再配合 CSS 过渡（transition）或 JS 动画库（如 anime.js）补帧。直接在 Bootstrap 表格上加 draggable="true" 只能触发基础拖放事件，视觉上毫无动画反馈。
用 SortableJS + Bootstrap 实现带过渡的拖拽行
这是目前最轻量、兼容性好、且能自然融入 Bootstrap 样式的方案。关键点不是“让 Bootstrap 动起来”，而是让它不干扰拖拽过程中的 DOM 重排和样式过渡。
-
SortableJS负责捕获拖拽、计算插入位置、实时移动<tr> 元素 <li>给 <code><tbody> 添加 <code>sortablejs实例，禁用swap模式（避免闪烁），启用animation: 150（毫秒级 CSS 过渡） - 确保表格行有明确的
transition：比如tr { transition: transform 0.15s ease, opacity 0.15s ease; } - Bootstrap 的
table-striped或table-hover类可能在拖拽中错乱，建议临时移除或用:not(.sortable-ghost)排除 ghost 元素
示例初始化：
new Sortable(document.querySelector('tbody'), {
animation: 150,
handle: '.drag-handle', // 可选：只允许点击某列拖拽
ghostClass: 'sortable-ghost',
chosenClass: 'sortable-chosen'
});
拖拽时 tbody 高度塌陷或行错位的常见原因
这几乎必现于 Bootstrap 表格 + 拖拽组合，根源是 SortableJS 默认把被拖元素设为 position: fixed 并脱离文档流，而 Bootstrap 表格依赖 display: table-row 的自动高度计算。
- 必须给
tbody显式设置min-height（哪怕只是min-height: 1px），防止高度归零 - 避免在
tr上使用transform: translateY()手动模拟动画——它会干扰 Sortable 的坐标判断 - 如果用了
table-responsive，确保外层div不设overflow: hidden，否则拖拽过程中 ghost 元素会被裁剪 - Chrome 下偶发
dragstart后cursor错乱，可在dragstart里加event.dataTransfer.setDragImage(new Image(), 0, 0)隐藏默认拖影
纯 CSS 方案只适用于固定高度表格
如果你的表格行高完全固定（比如每行都是 48px），可以用 grid + drag and drop 模拟表格布局，再靠 grid-template-rows 和 transition 做位移动画。但这就脱离了 Bootstrap table 语义，无法响应 table-sm、table-bordered 等类，也不支持表头冻结或响应式断点。
真正要保留 Bootstrap 表格结构又想要顺滑拖拽，就得接受 JS 驱动的事实：动画不是“加个 class 就有”，而是靠 SortableJS 在 onMove 中动态更新 transform，再靠 CSS 补过渡帧。这个链条里任意一环漏掉（比如忘了写 transition，或没处理 ghostClass 样式），动画就变成瞬移。
