获取拖动可排序Div后的jQuery排序顺序

嘿，我来帮你解决这个排序捕获的问题！你说得对，确实需要针对整行顺序调整和行内项顺序调整分别处理，咱们一步步来实现：

先理清楚基础结构（假设你的HTML大概是这样） #

先给个参考结构，方便对应后续代码：

<!-- 外层容器：控制整行的横向排序 -->
<div id="board-container" class="row-sortable">
  <!-- 每一行：本身是可排序的，内部包含行内可排序项 -->
  <div class="board-row" id="row-{{row.pk}}" data-sort="{{row.sort_order}}">
    <div class="item-container" class="item-sortable">
      <div class="board-item" id="item-{{item.pk}}" data-sort="{{item.sort_order}}">
        看板内容
      </div>
      <div class="board-item" id="item-{{item.pk}}" data-sort="{{item.sort_order}}">
        看板内容
      </div>
    </div>
  </div>
  <div class="board-row" id="row-{{row.pk}}" data-sort="{{row.sort_order}}">
    <!-- 行内项 -->
  </div>
</div>

第一步：分别初始化两个Sortable实例并绑定事件 #

我们需要给行容器和行内项容器各自初始化Sortable，然后在排序完成的update事件里捕获新顺序，再发POST请求。

1. 处理整行的排序提交 #

// 初始化行的横向排序
$(".row-sortable").sortable({
  axis: "x", // 指定横向排序，适配你的看板
  update: function(event, ui) {
    // 提取排序后的行主键：把id里的前缀去掉，拿到纯粹的pk
    const sortedRowPks = $(this).sortable("toArray").map(id => id.replace("row-", ""));
    
    // 准备提交给后端的数据
    const payload = {
      row_order: sortedRowPks // 后端可以直接用这个数组更新行的排序字段
    };
    
    // 发送POST请求
    $.ajax({
      url: "/your-backend/api/update-row-order/", // 替换成你的后端接口
      method: "POST",
      data: payload,
      success: function(res) {
        console.log("行排序更新成功！");
        // 同步更新前端的data-sort属性，保持前后端一致
        $(this).find(".board-row").each(function(index) {
          $(this).attr("data-sort", index + 1);
        });
      },
      error: function(xhr) {
        console.error("行排序更新失败：", xhr.responseText);
        // 可以在这里做回滚处理，比如恢复原来的排序
        $(this).sortable("cancel");
      }
    });
  }
});

2. 处理行内项的排序提交 #

// 初始化每个行内项的横向排序
$(".item-sortable").sortable({
  axis: "x",
  update: function(event, ui) {
    // 先拿到当前行的主键
    const parentRow = $(this).closest(".board-row");
    const rowPk = parentRow.attr("id").replace("row-", "");
    
    // 提取当前行内排序后的项主键
    const sortedItemPks = $(this).sortable("toArray").map(id => id.replace("item-", ""));
    
    // 准备提交数据
    const payload = {
      row_id: rowPk,
      item_order: sortedItemPks // 后端根据行ID更新该行内项的排序
    };
    
    // 发送POST请求
    $.ajax({
      url: "/your-backend/api/update-item-order/", // 替换成你的后端接口
      method: "POST",
      data: payload,
      success: function(res) {
        console.log("行内项排序更新成功！");
        // 同步更新行内项的data-sort属性
        $(this).find(".board-item").each(function(index) {
          $(this).attr("data-sort", index + 1);
        });
      },
      error: function(xhr) {
        console.error("行内项排序更新失败：", xhr.responseText);
        // 失败时回滚排序
        $(this).sortable("cancel");
      }
    });
  }
});

几个关键要点要注意 #

• 用update事件而非change：update是排序操作完全结束后触发，不会在拖拽过程中反复触发，避免不必要的请求；change是拖拽时实时触发，不适合提交。
• 主键提取技巧：sortable("toArray")会直接返回排序后元素的id数组，咱们用replace去掉前缀（比如"row-"、"item-"），就能拿到数据库里的主键，后端直接用这个数组更新排序字段就行。
• 前端状态同步：成功提交后记得更新data-sort属性，这样前端显示的排序状态和后端保持一致，下次刷新也不会乱。
• CSRF防护：如果后端有CSRF验证（比如Django），要在POST数据里带上CSRF令牌，比如加上csrfmiddlewaretoken: $("input[name='csrfmiddlewaretoken']").val()。

额外优化建议 #

• 加个防抖：如果用户快速拖拽排序，可以用防抖函数延迟提交，避免短时间内多次请求，比如用setTimeout包裹提交逻辑，每次触发时清除上一个定时器。
• 加载状态：排序时给容器加个loading类，显示加载动画，提升用户体验。
• 错误回滚：如果请求失败，用sortable("cancel")恢复原来的排序，避免前端和后端状态不一致。

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