如何用Sortable.js实现表格表头与tbody列同步拖拽排序？

问题出在你仅对表头的<tr>元素启用了Sortable，但未关联tbody中的对应列。要实现同步排序，需要监听Sortable的排序结束事件，手动调整tbody每行里单元格的位置，步骤如下：

1. 修改Sortable配置，添加onEnd回调
   在初始化Sortable时，加入onEnd事件监听，用于获取排序前后的列索引，然后同步更新tbody的单元格顺序：

   const el = document.getElementById('sortable_employees');
   const sortable = new Sortable(el, {
       animation: 150,
       ghostClass: 'bg-blue-200',
       onEnd: function(evt) {
           // 获取拖拽前的旧索引和拖拽后的新索引
           const oldIndex = evt.oldIndex;
           const newIndex = evt.newIndex;
           
           // 获取tbody下的所有行
           const rows = document.querySelectorAll('#your-table-id tbody tr');
           
           rows.forEach(row => {
               // 获取当前行的所有单元格
               const cells = Array.from(row.children);
               // 取出被拖拽的单元格
               const movedCell = cells.splice(oldIndex, 1)[0];
               // 将单元格插入到新位置
               cells.splice(newIndex, 0, movedCell);
               // 重新拼接单元格到行中
               row.innerHTML = '';
               cells.forEach(cell => row.appendChild(cell));
           });
       }
   });
   

   注意替换#your-table-id为你实际的表格ID。

2. 关键逻辑说明

   • evt.oldIndex：拖拽列原来的位置索引
   • evt.newIndex：拖拽列新的位置索引
   • 遍历tbody的每一行，对每行的单元格数组进行剪切-插入操作，实现列的同步移动

这样配置后，拖拽表头列时，tbody对应的列就会同步完成排序。

内容的提问来源于stack exchange，提问作者Mateusz Białowąs