Angular Drag & Drop: cdkDrag item dropping in nested cdkDropLists

Question

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?

Please provide enough code so others can better understand or reproduce the problem. — Community, Sep 27 '21 at 11:42

score 0 · Accepted Answer · answered Sep 19 '21 at 20:13

0

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 Sep 19 '21 at 20:13

CeritT

522
3
12

Thanks, this works in this case. I have updated my stackblitz. I'm having the same issue but now I have my lists as components. It doesn't seem to connect them when they are in separate components – Chris Burton Sep 19 '21 at 21:14
The problem is about lifecycle of components. You are generating the ids dynamically in list components' `ngOnInit`, let the parent component define all ids at once and pass them as an input to list component to use as id of cdkDropList. You will also have defined id list for `[cdkDropListConnectedTo]` without having to use `idService`. – CeritT Sep 19 '21 at 21:41
Also your `(cdkDropListEntered)` event alwasy logs `'page'` to console. Don't let it fool you. Change it to `id` passed from parent to see that it's working. – CeritT Sep 19 '21 at 21:44
Ok, but right now it is getting the Ids from the service which gets an updated list whenever a new id is added (I agree that it would be better to have the parent pass the ids down to the children, but the cdkDropListConnectedTo is currently getting the updated ids array. Would it be some sort of issue with the cdkDropListConnectedTo directive not updating the ids properly when the input is updated? – Chris Burton Sep 19 '21 at 21:44
I've updated it to. have the IDs generated and then passed down to the lists, but its still not able to drop inside the nested droplists. (I also fixed it so it logs the proper id and not just 'page') – Chris Burton Sep 19 '21 at 21:51
It seems like it has issues with when you add the id of a parent that has children drop lists to the cdkDropListConnectedTo array. I want to be able to drag a dragItem from one drop list and have it be able to go inside any of the nested drop lists of another droplist. (and that includes multiple levels nested) – Chris Burton Sep 19 '21 at 21:56
Yes i saw what you've changed. Having the parent list's id in that id list which you pass to `cdkDropListConnectedTo` breaks it i guess, leave the parent list's id out of the ids array. For your previous comment if you want to create a way to dynamically add more lists, you should find a way to update parentList, need to check further on that. – CeritT Sep 19 '21 at 21:56

Angular Drag & Drop: cdkDrag item dropping in nested cdkDropLists

1 Answers1