16

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?

Louis Coleman
  • 165
  • 1
  • 1
  • 8

2 Answers2

23

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

Community
  • 1
  • 1
Serge Kolchin
  • 362
  • 4
  • 8
  • 2
    Do you know why id is required? – Ben Cheng May 30 '19 at 13:45
  • 2
    Thanks a lot for that! A small addition: it's better to add cdkDropListOrientation="horizontal" to the outer cdkDropList to get rid of that moving of the groups up and down. – Stalli Jun 06 '19 at 05:39
  • Any idea of how to make it work for nesting groups, ie we should be able to insert a group within a group . ? – Mohit Harshan Jan 14 '20 at 11:35
  • 1
    I was able to achieve the same with solution https://stackblitz.com/edit/angular-cdk-nested-drag-drop-demo?file=src%2Fapp%2Fshared%2Fcomponents%2Flist-item%2Flist-item.html , but couldnt get both the reordering and nesting to work correctly, i had to give a separate holder for dragging to group and changing the order. – Mohit Harshan Jan 14 '20 at 11:37
  • @Stalli ..Any idea with this? – Mohit Harshan Jan 14 '20 at 11:50
  • Note that it is literally by design that this doesn't work automatically with `cdkDropListGroup`. In the source you can see that CDK_DROP_LIST_GROUP is redefined as undefined to prevent inheriting it. – Simon_Weaver Jun 27 '21 at 22:21
  • @Stalli Do anyone of you know how to achieve dragging and dropping multiple items with checkboxes to select? – Hope Sep 01 '23 at 11:03
0

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

Rajan Kashiyani
  • 891
  • 7
  • 11