Angular Material Nested Drag and Drop

Question

I'm trying to achieve a reorder-able group of list which contain elements that can be moved between lists, using @angular/cdk/drag-drop, although I'm running into a few problems.

I've managed to separately create individual examples which achieve the individual drag and drop, although when brought together it seems I cannot achieve both pieces of functionality in parallel.

Moving items between groups: https://stackblitz.com/edit/items-move

Reordering groups: https://stackblitz.com/edit/groups-move

Both together: https://stackblitz.com/edit/groups-items-move

It seems in the Both together example, the dragging of individual items works as expected, but the re-ordering of the groups does not work, however, the cdkDropListGroup on line 4 of cdk-drag-drop-connected-sorting-group-example.html when moved outside the parent <cdk-drop-list> then causes the opposite to occur, the groups are now able to be reordered, but the items are then not able to be moved between groups.

Any pointer as to where i'm going wrong?

Answer 1

It looks like cdkDropListGroup doesn't work for nested lists. Just add the id to the lists and connect them together with [cdkDropListConnectedTo].

Both together: https://stackblitz.com/edit/nested-connected-lists