cdk在嵌套情况下拖放

Question

这是关于"cdk dnd"和"嵌套"的第三个问题!

我没有得到另一个SO问题的hacky建议.

所以这里有一个非常简单的基础- > STACKBLITZ < -我创造了.一切正常,我与容器内的嵌套元素进行交互.

当我尝试仅对嵌套元素进行排序时,angular会尝试使用容器本身对嵌套元素进行排序...这会产生不需要的行为.

有谁知道如何解决这个问题？明天我会继续这个工作.

Answer 1

如果您仍在寻找这个问题的答案，您可以使用cdkDragBoundary限制元素可以拖动的位置。在您的示例中，它将涉及：

1. 将类添加到保存嵌套列表的 div
2. 将cdkDragBoundary属性添加到保存时间段的 div，针对 1 中添加的类。

容器组件的 HTML 如下所示：

<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>

*编辑用于定位容器的类