jQuery UI Sortable跨连接列表排序时update事件触发两次问题求助

我完全懂你遇到的这个麻烦——跨列表拖动项的时候，update会因为原列表和目标列表的位置变动各触发一次，而你只想让它专心处理同列表内的排序调整，跨列表的逻辑交给receive来做。下面是具体的解决思路和代码调整方案：

核心思路 #

借助Angular UI Sortable提供的ui.item.sortable内置属性，精准区分同列表排序和跨列表拖动场景：

• ui.item.sortable.sourceModel：拖动元素最初所属的列表数据模型
• ui.item.sortable.model：拖动元素当前所在的列表数据模型

当这两个模型是同一个对象时，说明是同列表内的排序操作，此时才执行update里的逻辑；如果不是，就直接跳过update的处理，把跨列表的逻辑完全交给receive负责。

调整后的代码示例 #

$scope.sortableEpics = {
  connectWith: '.sortable-list', // 你的连接列表选择器
  receive: function(event, ui) {
    // 这里专门处理跨列表拖动过来的项的逻辑
    // 比如更新关联数据、初始化项的状态等
    console.log('处理跨列表新增项:', ui.item);
  },
  update: function(event, ui) {
    // 判断是否为同列表内的排序操作
    if (ui.item.sortable.sourceModel === ui.item.sortable.model) {
      // 这里只执行同列表排序后的逻辑
      console.log('处理同列表排序:', ui.item);
      // 比如保存新的排序顺序到后端、更新本地状态等
    } else {
      // 跨列表拖动时，跳过update处理，交给receive
      return;
    }
  }
};

额外优化建议 #

如果你的业务需要在跨列表时同步处理原列表的清理工作，可以配合remove事件来分工，让逻辑更清晰：

$scope.sortableEpics = {
  connectWith: '.sortable-list',
  receive: function(event, ui) {
    // 目标列表新增项的初始化/关联逻辑
  },
  remove: function(event, ui) {
    // 原列表移除项的清理/状态更新逻辑
  },
  update: function(event, ui) {
    if (ui.item.sortable.sourceModel === ui.item.sortable.model) {
      // 仅处理同列表内的排序调整
    }
  }
};

这样调整后，就能精准控制update的触发场景，彻底解决跨列表时的重复触发问题啦。

内容的提问来源于stack exchange，提问作者Laurens Mäkel