1

我查看@angular/cdk了拖放示例，几乎所有这些示例都用于对列表进行排序并在不同列表中拖动项目。

我正在尝试实现一种文件文件夹类型的行为，其中您有一个项目列表（每个项目指定为文件或文件夹），您可以将列表中的一个或多个文件项拖放到同一个列表中的文件夹项目......它会移入其中（当然由 API 调用处理）。

因此，常规排序实现将不起作用（可排序列表中的项目在悬停时移开）。

我通过了一些关于 SO 的问题，了解到每个项目都需要标记为cdkDropList. 所以，这是我到目前为止的实现：

<div *ngFor="let item of items"
  cdkDropList
  [cdkDropListData]="[item]"
  (cdkDropListDropped)="onDrop($event, item)"
>
  <div class="test" cdkDrag>[{{item.type}}] {{item.name}}</div>
</div>

但是，事件数据仅包含有关被拖动项目（文件项目）的信息。在下面的代码中event.previousContainer.data，event.container.data和itemall 指的是同一个对象——被删除的文件项。

onDrop(event: any, item: ItemData) {
  console.log('drop event = ', event);
  console.log('event.previousContainer.data = ', event.previousContainer.data);
  console.log('event.container.data = ', event.container.data);
}

谁能告诉我这里到底出了什么问题？谢谢。

编辑：这是 stackblitz 的复制品：https ://stackblitz.com/edit/angular-ivy-edaftg

4

0 回答 0