Question

这是关于“ cdk dnd”和“嵌套”的第三个问题！

我没有完全理解另一个SO问题的hacky suggestion。

这是我创建的一个非常基本且简单的-> STACKBLITZ <-。一切正常，直到我与容器中的嵌套元素进行交互。

当我尝试仅对嵌套元素进行排序时，angular尝试使用容器本身对嵌套元素进行排序...这会产生有害的行为。

有人知道如何解决这个问题吗？明天我将进一步工作。

Answer 1

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

向包含嵌套列表的div添加一个类
将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>

*编辑了用于定位容器的类

在嵌套情况下cdk拖放

1 个答案: