Drag Drop inside nested drop zone Angular

Question

I am trying to create a drop zone inside another drop zone, and i want the ability to drop in both drop region. To achieve that i have tried using "cdkDropListConnectedTo" To be the id's of all the drop region but due to some reason child drop region is not getting detected.

stackblitz link : https://stackblitz.com/edit/drag-drop-inside-another-container?file=app%2Fcdk-drag-drop-connected-sorting-example.html

Bhagwan Komalram Bhagwan Komalram · Accepted Answer · 2020-01-03T20:56:36

As I can see the child region is not detected because the nested DOM element dont let him trigger the event.

Can you change your last element like this:

<div class="example-container">
  <h2>Done</h2>

  <div
    cdkDropList
    #doneList="cdkDropList"
    [cdkDropListData]="done"
    [cdkDropListConnectedTo]="todoList"
    class="example-list"
    (cdkDropListDropped)="drop($event)"> 
    <div class="example-box" *ngFor="let item of done" cdkDrag>{{item}}</div>      
 </div>  
  <hello class="example-box" id='child1' [todoList]='todoList'>{{done}}</hello>    
</div>

Drag Drop inside nested drop zone Angular

1 Answers