Angular nested Drag And Drop into another list

Question

I have a scenario, where I need to drop a feature into the respective item. So, here I am using angular-material for drag and drop but it is dropping feature outside of the item, I want to insert the feature inside the item.

Here is the sample: https://stackblitz.com/edit/angular-6cshhz-vsskhg?file=src%2Fapp%2Fcdk-drag-drop-connected-sorting-example.html[enter link description here]1

What is the configuration I need to do? Anyone can help me? Thanks!

robert robert · Accepted Answer · 2021-04-03T16:00:10

To be able to drag and drop first add this directive cdkDropListGroup to parent element.

After that change your array done to also include dropped items:

  done = [
    {
      name: "Apple",
      items: [] <-- here will be stored the dropped item
    },

after that move the droplist to be child of each done item.

  <div cdkDropList [cdkDropListData]="item.items" class="example-list" (cdkDropListDropped)="drop($event)">
    <div class="example-box" *ngFor="let it of item.items" cdkDrag>{{it}}</div>
  </div>

Working Stackblitz. Don't forget to "open" the accordion to see the "droplist".

Angular nested Drag And Drop into another list

1 Answers