angular-sortablejs是否兼容Angular 5？拖拽排序失效求助

Hey，我来帮你搞定这个拖拽排序失效的问题～

1. angular-sortablejs 与 Angular 5 的兼容性 #

angular-sortablejs 是支持 Angular 5 的，但得装对应版本的包！Angular 5 适配的是 angular-sortablejs 的 2.x.x 系列版本（比如 2.5.0），如果装了更高版本（比如适配 Angular 6+ 的），就会出现不兼容的情况。你可以跑下面的命令安装正确版本：

npm install angular-sortablejs@2.5.0 sortablejs@1.7.0 --save

别忘了搭配对应版本的核心库 sortablejs@1.7.0，这个版本和 Angular 5 适配得很稳定。

2. 你的代码里的坑 #

你同时用了 ng-drag-drop 的 [draggable] 指令和 angular-sortablejs 的指令，这俩拖拽库的指令大概率会冲突，导致其中一个直接罢工。另外还有个小问题：li 元素直接放在 div 里不符合 HTML 规范，li 必须套在 ul 或者 ol 里面，这也可能影响 sortablejs 的正常工作。

修改后的代码示例 #

如果不需要跨列表拖拽，建议只保留 angular-sortablejs 来实现单列表排序，修改后的代码如下：

<div class="card-header card-inverse card-primary">Drop Anything here</div>
<div class="card-block scroll-list">
  <ul [sortablejs]="droppedHorizontalItems" [sortablejsOptions]="{ animation: 150 }">
    <li *ngFor="let item of droppedHorizontalItems; let in=index" 
        class="horizontal list-group-item">
      {{item.name}}
    </li>
  </ul>
</div>

如果确实需要跨列表拖拽（依赖 ng-drag-drop 的功能），那得避免在同一个元素上同时用两个库的拖拽指令，或者调整逻辑：比如用 ng-drag-drop 处理跨列表的拖拽放置，用 angular-sortablejs 负责单个列表内的排序，让两者的作用范围不重叠。

3. 额外要检查的点 #

• 确保你已经在 Angular 模块里正确导入了 SortablejsModule：

  import { SortablejsModule } from 'angular-sortablejs';
  
  @NgModule({
    imports: [
      // ...其他你需要的模块
      SortablejsModule.forRoot({ animation: 150 })
    ]
  })
  export class YourModule { }
  

• 确认 droppedHorizontalItems 是可修改的数组（别用不可变对象，不然排序后视图不会更新），比如在组件里这么定义：

  droppedHorizontalItems: any[] = []; // 保证是数组类型，且能被修改
  

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