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.

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

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