CODEWITHSUNDEEP
angulardrag-and-dropangular-material2
Louis Coleman
Louis Coleman

Reputation: 165

Angular Material Nested Drag and Drop

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?

Upvotes: 16

Views: 15928

Answers (2)

Rajan Kashiyani
Rajan Kashiyani

Reputation: 911

Here is code for nested drag/drop with material accordion along with below points.

  1. In List parent to parent drag/drop
  2. In List inside one parent child to child drag/drop
  3. In List one child from one parent to other parent drag/drop

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

Upvotes: 0

Serge Kolchin
Serge Kolchin

Reputation: 371

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

Upvotes: 24

Related Questions