Question

我的棱角项目中有一个非常简单的下拉列表：

<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);
  }
}

请注意，我的客户是我的数据源。而且我会在删除后对其进行更新

cdkDropList不会保存新的项目顺序

1 个答案: