Angular材质嵌套拖放

Question

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

我设法单独创建了单独的示例来实现单独的拖放，尽管当放在一起时似乎我无法同时实现这两个功能。

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

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

两者一起： https://stackblitz.com/edit/groups-items-move

似乎在Both together示例中，单个项目的拖动按预期工作，但组的重新排序不起作用，但是， cdk-drag-drop-connected-sorting-group-example.html第 4 行的cdkDropListGroup cdk-drag-drop-connected-sorting-group-example.html当移动到父<cdk-drop-list>之外时会导致相反的情况发生，组现在可以重新排序，但项目无法在组之间移动。

关于我哪里出错的任何指示？

Answer 1

看起来cdkDropListGroup不适用于嵌套列表。 只需将id添加到列表中，并使用[cdkDropListConnectedTo]将它们连接在一起。

两者结合在一起 ： https ： //stackblitz.com/edit/nested-connected-lists

Answer 2

这是带有材料手风琴的嵌套拖放代码以及以下几点。

1. 在父级列表中拖/放
2. 在一个父子列表中拖/放
3. 在 List one child from one parent to other parent 拖/放

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