Angular Drag & Drop: cdkDrag item dropping in nested cdkDropLists

Issue

Stackblitz to showcase issue: https://stackblitz.com/edit/angular-ivy-tzyvbe?file=src%2Fapp%2Fapp.component.html

I have a outer cdkDropListGroup, and inside two cdkDropLists.

The first cdkDropList also has two drop lists in it.

I want to be able to drop a cdkDrag item into the first cdkDropList but also into the nested cdkDropLists inside it if dropping into them.

You can see I'm logging the dropList you drop the item into and it is always the outer droplist id.

How can I drop inside nested droplists or is this even possible?

Solution

You should use [cdkDropListConnectedTo] attribute of cdkDropList to specify other connected containers into which the container's items can be transferred. cdkDropListGroup does this automatically for its children. Here is the edited sample code from your stackblitz.

<div cdkDropListGroup>
  <div cdkDropList class="page-list-1" (cdkDropListEntered)="drop('page')">
    <div
      cdkDropList
      id="dropList1"
      class="page-list-2"
      (cdkDropListEntered)="drop('list-1')"
    ></div>

    <div
      cdkDropList
      id="dropList2"
      class="page-list-3"
      (cdkDropListEntered)="drop('list-2')"
    ></div>
  </div>

  <div
    cdkDropList
    [cdkDropListConnectedTo]="['dropList1', 'dropList2']"
    class="components"
  >
    <div cdkDrag class="item">Hi</div>
  </div>
</div>

Answered By - CeritT