Angular Material嵌套拖放

Question

我正在尝试使用@angular/cdk/drag-drop实现一个可重新排序的列表组，其中包含可以在列表之间移动的元素。虽然我遇到了一些问题。

我成功地分别创建了单独的示例，实现了单个拖放，但当它们组合在一起时，似乎我无法同时实现两个功能。

在组之间移动项目: https://stackblitz.com/edit/items-move

重新排序组: https://stackblitz.com/edit/groups-move

同时实现两个功能: https://stackblitz.com/edit/groups-items-move

在同时实现两个功能的示例中，单个项目的拖放表现如预期，但是组的重新排序却不起作用。然而，在cdk-drag-drop-connected-sorting-group-example.html的第4行上的cdkDropListGroup被移动到父级<cdk-drop-list>之外时，情况就会发生相反的变化，组现在可以重新排序，但是这时项目就不能在组之间移动了。

请问我做错了哪些地方？

- Louis Coleman

---

相关问题：https://github.com/angular/components/issues/16671 - Simon_Weaver

Answer 1

看起来cdkDropListGroup对于嵌套列表不起作用。只需为列表添加id，并使用[cdkDropListConnectedTo]将它们连接在一起即可。

两者一起：https://stackblitz.com/edit/nested-connected-lists

- Serge Kolchin

---

你知道为什么需要id吗？ - Ben Cheng

非常感谢！一个小改动：最好在外部的cdkDropList中添加cdkDropListOrientation="horizontal"，以摆脱群组上下移动。 - Stalli

有没有想法如何使其适用于嵌套组，即我们应该能够在组内插入一个组？ - Mohit Harshan

我能够通过解决方案 https://stackblitz.com/edit/angular-cdk-nested-drag-drop-demo?file=src%2Fapp%2Fshared%2Fcomponents%2Flist-item%2Flist-item.html 实现相同的效果，但无法正确地实现重新排序和嵌套，我不得不为拖动提供一个单独的容器来分组并更改顺序。 - Mohit Harshan

请注意，这是有意设计的，不能自动与cdkDropListGroup一起使用。在源代码中，您可以看到CDK_DROP_LIST_GROUP被重新定义为未定义，以防止继承它。 - Simon_Weaver

Answer 2

以下是嵌套拖放和材料手风琴的代码，以及以下要点：

1. 在列表中父级到父级的拖放
2. 在列表中一个父级内部的子级到子级的拖放
3. 在列表中一个父级的一个子级到另一个父级的拖放

https://stackblitz.com/edit/angular-ivy-hhnnke?file=src%2Fapp%2Fapp.component.html

- Rajan Kashiyani