这是 SO 上关于 "cdk dnd" 和 "nested" 的第三个问题!
我并没有完全理解其他 SO 问题中的hacky suggestion。
所以,这里是我创建的一个非常基本和简单的-> STACKBLITZ <-。一切都能正常工作,直到我与容器内的嵌套元素进行交互。
当我尝试仅对嵌套元素进行排序时,Angular 就会尝试将嵌套元素与容器本身一起排序... 这会导致不需要的行为。
有人有什么想法如何解决这个问题吗?明天我会进一步研究。
这是 SO 上关于 "cdk dnd" 和 "nested" 的第三个问题!
我并没有完全理解其他 SO 问题中的hacky suggestion。
所以,这里是我创建的一个非常基本和简单的-> STACKBLITZ <-。一切都能正常工作,直到我与容器内的嵌套元素进行交互。
当我尝试仅对嵌套元素进行排序时,Angular 就会尝试将嵌套元素与容器本身一起排序... 这会导致不需要的行为。
有人有什么想法如何解决这个问题吗?明天我会进一步研究。
cdkDragBoundary
限制元素的拖动范围。在您的示例中,需要执行以下操作:
cdkDragBoundary
属性添加到包含时间段的 div 中,以定位第 1 步中添加的类。<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>
编辑了用于定位容器的类
以下是嵌套拖放的有效代码。
https://stackblitz.com/edit/angular-ivy-hhnnke?file=src%2Fapp%2Fapp.component.html