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 · Accepted Answer · 2020-01-03 20:56:36Z

0

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>

answered Jan 3, 2020 at 20:56

Bhagwan Komalram

1

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Drag Drop inside nested drop zone Angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related