Angular Material 嵌套拖放

Angular Material Nested Drag and Drop

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

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

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

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

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

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

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

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

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

这是带有 material 手风琴的嵌套 drag/drop 代码以及以下要点。

在列表中 parent 到 parent drag/drop
在List里面一个parentchild到childdrag/drop
列表中的一个child从一个parent到另一个parentdrag/drop

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

Angular Material 嵌套拖放

Angular Material Nested Drag and Drop

drag-and-drop

angular-material2

angular