如何实现HTML表格整行与整列的拖拽排序功能？

关于jQuery UI Sortable的局限 #

你提到的用jQuery UI Sortable实现整行/整列拖拽的需求，原生Sortable组件确实很难直接满足——connectWith参数会导致单个<td>单元格可拖拽，而它的设计逻辑更偏向同层级元素的排序（比如仅处理<tr>或者仅处理<th>）。如果要强行用它实现同时支持整行和整列的拖拽，需要手动编写大量事件监听、拖拽方向判断、批量DOM移动的代码，开发成本会比较高。

最终解决方案：使用DataTables插件 #

我后来通过DataTables完美解决了这个问题，它的RowReorder和ColReorder扩展可以轻松实现行与列的拖拽排序，操作非常简便：

1. 准备步骤

• 按照DataTables基础安装指南引入所需的脚本与样式文件
• 下载插件时勾选扩展模块中的ColReorder和RowReorder组件

2. 初始化代码

$(document).ready( function () {
  $('#myTable').DataTable({
    searching: false,
    ordering: false,
    rowReorder: true,
    colReorder: true,
  });
});

注：我把searching和ordering设为false是因为我的业务场景不需要这些功能，你可以根据自身需求调整，这两个功能在很多场景下其实很实用。

3. 原HTML的适配修改

原有的HTML代码不能直接用于DataTables，需要做两处关键调整：

• 将行内的<th scope="row">标签替换为<td>标签，否则行排序功能会出现异常
• 表格必须包含<thead>和<tbody>标签，这是DataTables正常运行的硬性要求

4. 实用参数优化

初始化时可以添加一个优化参数：

rowReorder: { update: false },

这个参数能避免部分表格出现异常行为——比如我的简单表格中，不设置该参数时，拖拽行只能上下移动一行，设为false后问题立即解决，且未引发其他副作用。

内容的提问来源于stack exchange，提问作者bikz