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

I did not quite get the [hacky suggestion](https://stackoverflow.com/a/53272842/6852937) of the other SO question.

So here is a very basic and simple [-> STACKBLITZ <-](https://stackblitz.com/edit/angular-1zwcg9) 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: 
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
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>