[Fixed] Angular nested Drag And Drop into another list


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!


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>

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

Leave a Reply

(*) Required, Your email will not be published