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 拖到最后时，它会跳回到列表的第一位。

这是一个 video demo 的问题。
这是我在 StackBlitz 上遇到的 re-creation 问题。

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

之后更新它

cdkDropList 不保存新的项目顺序

cdkDropList doesn't save new order of items

angular-material

angular

angular-material-7