cdk drag and drop in a nested situation

Question

This is the third question here on SO regarding "cdk dnd" and "nested"!

I did not quite get the hacky suggestion of the other SO question.

So here is a very basic and simple -> STACKBLITZ <- I've created. Everything works fine to the point where I interact with the nested elements inside the container.

When I try to sort just the nested elements, angular tries to sort the nested element with the container itself ... which creates unwanted behavior.

Does anyone have an idea how to solve this? I will further work this one tomorrow.

Mismanage

What is the wanted behaviour? vs the behaviour happening now – Vonvona

dropzone A, something like this, except the container only has one row. @JonasPraem I thought nested drag and drop is clear. – Mismanage

I can drag elements out of the nested container, but not inside. Is that the issue? - Yes, it is clear that the question is about nested drag and drop – Vonvona

Answer 1

If you're still looking for an answer to this you can use cdkDragBoundary to restrict where an element can be dragged. In your example it would involve:

1. Adding a class to the div holding the nested list
2. Adding the cdkDragBoundary attribute to the divs holding the time periods, targeting the class added in 1.

The HTML for the container component will look like this:

<div style="background-color=pink;">
  <div [cdkDropListData]="timePeriods" cdkDropList cdkDropListOrientation="horizontal"
    id="containerId" [cdkDropListConnectedTo]="['allDataId']" 
  (cdkDropListDropped)="drop($event)" class="example-list">

    <div class="example-box" cdkDragBoundary=".example-list" *ngFor="let timePeriod of timePeriods" cdkDrag>{{timePeriod}}</div>
  </div>
</div>

*Edited the class being used to target the container

Frias

Sure. It seems there's an issue where on initial load it misbehaves but works after a soft refresh (making any change like adding a space in the html). I think it may have something to do with the renderer. I'll try to see if I can figure that part out but this is what i'm working with atm: stackblitz.com/edit/angular-1zwcg9-w5rlnk – Frias

Answer 2

Here is code effective for nested drag/drop.

1. In List parent to parent drag/drop
2. In List inside one parent child to child drag/drop
3. In List one child from one parent to other parent drag/drop

https://stackblitz.com/edit/angular-ivy-hhnnke?file=src%2Fapp%2Fapp.component.html

Lolland