基于angular ui-sortable，无需Ctrl键实现相邻多选及同步排序

我之前刚好碰到过一模一样的需求，折腾了一阵子后整理出几个可行的方案，分享给你：

方案1：修改多选扩展的选择逻辑（最直接） #

ui-sortable-multiselection扩展的核心是通过监听Ctrl/Cmd键来切换多选状态，我们可以直接修改它的点击事件处理逻辑，移除对快捷键的依赖：

1. 找到扩展的核心指令代码（通常是处理项目点击的部分）
2. 定位到判断event.ctrlKey或event.metaKey的代码块，把这个条件移除，让点击行为直接触发多选切换：

// 原扩展中的点击处理逻辑大概是这样
element.on('click', function(event) {
  if (event.ctrlKey || event.metaKey) {
    toggleItemSelection(item); // 切换选中状态
  } else {
    clearAllSelections(); // 清空所有选中，只选当前项
    selectItem(item);
  }
});

// 修改后，点击直接切换选中状态，无需快捷键
element.on('click', function(event) {
  toggleItemSelection(item);
  // 如果你希望点击就添加选中（不取消已有选中），可以改成：
  // if (!isItemSelected(item)) {
  //   selectItem(item);
  // }
});

这样用户点击任意项目都会直接加入/移出选中集合，不需要按住Ctrl键。

方案2：用自定义指令模拟Ctrl键按下（无侵入式） #

如果你不想修改原扩展的代码，可以写一个轻量的指令，在点击项目时自动模拟Ctrl键被按下的状态，让扩展误以为用户按住了快捷键：

angular.module('yourApp').directive('autoMultiSelect', function() {
  return {
    restrict: 'A',
    link: function(scope, element) {
      element.on('click', function(event) {
        // 强制设置Ctrl键为按下状态
        event.ctrlKey = true;
        // Mac系统可以同时设置metaKey
        // event.metaKey = true;
      });
    }
  };
});

然后把这个指令添加到每个可排序的项目元素上：

<li ng-repeat="item in items" ui-sortable auto-multi-select>
  {{ item.name }}
</li>

这个方案完全不改动原扩展代码，兼容性也不错，适合不想维护扩展分支的场景。

方案3：手动维护选中集合（灵活性最高） #

如果上面两种方案都不符合你的需求，还可以自己手动维护选中状态，再结合ui-sortable的事件来实现多选排序：

1. 在控制器中定义selectedItems数组，用来存储选中的项目
2. 给每个项目添加点击事件，点击时将项目加入/移出selectedItems
3. 监听ui-sortable的start事件，记录当前选中的项目和它们的位置
4. 在update事件中，根据排序后的位置，批量调整selectedItems在原数组中的位置

这种方案灵活性最高，但需要处理更多的细节（比如排序时的位置计算、选中状态的同步等），适合有复杂自定义需求的场景。

注意事项 #

• 记得处理点击空白区域清空选中的逻辑，提升用户体验
• 测试不同浏览器下的事件模拟效果（方案2）
• 如果使用方案1，建议fork原扩展仓库，自己维护修改后的版本，避免原扩展更新覆盖你的修改

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