使用jQuery UI Sortable：如何识别被拖拽排序的表格行所属表格

我太懂这种困扰了——把整个body设为可排序确实会导致无法精准定位触发排序的表格。其实换个思路，我们应该给每个表格的<tbody>单独设置可排序，这样就能直接在事件回调里关联到对应的表格了，具体做法如下：

1. 给每个表格添加唯一标识 #

首先确保你的每个表格都有一个唯一的标识，比如id或者自定义data-*属性，方便后续在AJAX里告诉服务器是哪个表格的排序发生了变化：

<table id="table-1" class="sortable-table">
  <thead>
    <tr><th>内容</th></tr>
  </thead>
  <tbody>
    <tr data-row-id="1"><td>行1</td></tr>
    <tr data-row-id="2"><td>行2</td></tr>
  </tbody>
</table>

<table id="table-2" class="sortable-table">
  <thead>
    <tr><th>内容</th></tr>
  </thead>
  <tbody>
    <tr data-row-id="3"><td>行3</td></tr>
    <tr data-row-id="4"><td>行4</td></tr>
  </tbody>
</table>

2. 单独初始化每个表格的tbody为可排序 #

不要把body作为可排序容器，而是遍历每个表格的<tbody>来初始化Sortable，这样每个排序事件都会绑定到对应的tbody上：

$(function() {
  // 给所有带sortable-table类的表格的tbody初始化排序
  $('.sortable-table tbody').sortable({
    // 可选：设置拖拽时的视觉效果
    helper: 'clone',
    cursor: 'move',
    // 排序完成后触发的update事件
    update: function(event, ui) {
      // 获取当前触发排序的tbody所属的表格
      const $table = $(this).closest('.sortable-table');
      const tableId = $table.attr('id'); // 或者用data属性：$table.data('tableId')
      
      // 收集排序后的行ID列表
      const sortedRowIds = $(this).find('tr').map(function() {
        return $(this).data('row-id');
      }).get();
      
      // 发送AJAX请求到服务器
      $.ajax({
        url: '/your-save-sort-url',
        method: 'POST',
        data: {
          table_id: tableId,
          sorted_rows: sortedRowIds
        },
        success: function(response) {
          console.log('排序已保存', response);
        },
        error: function(xhr) {
          console.error('保存排序失败', xhr);
        }
      });
    }
  }).disableSelection(); // 可选：禁止拖拽时选中文字
});

关键说明 #

• 精准定位表格：通过$(this).closest('.sortable-table')可以直接从触发事件的tbody找到它所属的表格，完全不需要担心混淆其他表格。
• 行数据收集：用map()方法遍历排序后的行，提取每行的唯一标识（比如data-row-id），这样服务器就能知道新的排序顺序。
• 避免全局绑定：只给需要排序的表格tbody绑定Sortable，性能上也更优，不会影响页面其他元素。

如果你的表格是动态生成的（比如通过AJAX加载），记得在表格生成后重新执行一次Sortable的初始化代码，确保新添加的表格也能正常工作。

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