角度材质嵌套拖放 *对于未知数量的 cdk拖动列表

Question

我正在尝试在一个角度应用程序中进行拖放，其中我有 2 个列表，一个在右侧，一个在左侧。这是一个粗略的视觉效果

我需要能够将项目从左侧组拖动(和复制(到右侧由组分隔的列表。在这种情况下，我正在拖动列表项。

我还需要能够对其组中的列表项重新排序，并在右侧的组之间切换它们。我有这么多工作。

我需要的是能够对保存列表项的组重新排序。

我猜我有这个问题，因为我用了cdkDropListGroup.它会自动连接任何列表组，我无法单独拖动项目，同时仍然能够将整个组作为一个组抓取。我尝试重构以使用

[cdkDropListConnectedTo]="list-one"

但是因为我渲染了不可预测的组数量，并且我需要它们仍然连接，以便我可以在组之间拖动，所以它不允许我按 ID 连接列表。

我只是不走运，基本上嵌套在cdkDropListGroup标签中，还是有没有办法处理我没有看到的这个问题？

这是一个与我所问的问题非常相似的问题......我只想评论给出的答案(这在我的情况下是不够的(，但我没有评论的声誉。

Answer 1

请务必在 (cdkDropListDropped( 中使用 $event。本质上，您可以通过在两个列表之间映射 transferArrayItem 来实现 [cdkDropListConnectedTo]="list-one"。只要您的$event为每个列表发出不可预测的组数，您应该可以使用 *ng 实现

TS：

drop(event: CdkDragDrop<string[]>) {
if (event.previousContainer === event.container) {
moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
} else {
transferArrayItem(event.previousContainer.data,
event.container.data,
event.previousIndex,
event.currentIndex);
}
}

.HTML：

<div
cdkDropList
#doneList="cdkDropList"
[cdkDropListData]="done"
[cdkDropListConnectedTo]="[todoList]"
class="example-list"
(cdkDropListDropped)="drop($event)">
<div class="example-box" *ngFor="let item of done" cdkDrag>{{item}}</div>
</div>