嵌套情况下的cdk拖放

Posted 2023-05-08

【中文标题】嵌套情况下的cdk拖放

【英文标题】：cdk drag and drop in a nested situation

【发布时间】：2019-06-08 23:59:51

【问题描述】：

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

我不太明白另一个 SO 问题的 hacky suggestion。

所以这是我创建的一个非常基本和简单的-> STACKBLITZ <-。一切正常，我与容器内的嵌套元素交互。

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

有人知道如何解决这个问题吗？明天我会进一步处理这个。

【问题讨论】：

想要的行为是什么？ vs 现在发生的行为

dropzone A，类似这样，除了容器只有一行。 @JonasPraem 我认为嵌套拖放很清楚。

我可以将元素拖出嵌套容器，但不能拖到里面。是这个问题吗？ - 是的，很明显问题是关于嵌套拖放

【参考方案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>

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

【讨论】：

当然。似乎存在一个问题，在初始加载时它行为不端但在软刷新后工作（进行任何更改，如在 html 中添加空格）。我认为这可能与渲染器有关。我会试着看看我是否能弄清楚那部分，但这是我正在使用 atm 的：stackblitz.com/edit/angular-1zwcg9-w5rlnk