angular - cdkDropList 不保存项目的新顺序

Question

我的 Angular 项目中有一个超级简单的下拉列表：

<ul cdkDropList style="padding: 20px;">
    <li cdkDrag>111111</li>
    <li cdkDrag>222222</li>
    <li cdkDrag>333333</li>
    <li cdkDrag>444444</li>
    <li cdkDrag>555555</li>
</ul>

但是，当我拖到111111最后时，它会跳回列表中的第一位。

• 这是该问题的视频演示。
• 这是我在 StackBlitz 上的问题的重新创建。

Answer 1

您缺少数据源。

拖动后，您必须更新该数据源以反映您的 UI。

它正在跳回到你真正的模态状态。

例子：

HTML：

<div class="box-list" cdkDropList (cdkDropListDropped)="drop($event)">
  <div class="drag-box" *ngFor="let customer of customers" cdkDrag>
    {{customer.name}}
  </div>
</div>

TS 文件：

import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
...
export class SortListComponent implements OnInit {
  customers = [
    { name: 'Adam', age: 23 },
    { name: 'Jack', age: 27 },
    { name: 'Katherin', age: 26 },
    { name: 'John', age: 30 },
    { name: 'Watson', age: 42 },
  ];

  drop(event: CdkDragDrop<string[]>) {
    moveItemInArray(this.customers, event.previousIndex, event.currentIndex);
  }
}

请注意，我的客户是我的数据源。我在 drop 后更新它