CDK在嵌套情况下的拖放

Question

这是 SO 上关于 "cdk dnd" 和 "nested" 的第三个问题！

我并没有完全理解其他 SO 问题中的hacky suggestion。

所以，这里是我创建的一个非常基本和简单的-> STACKBLITZ <-。一切都能正常工作，直到我与容器内的嵌套元素进行交互。

当我尝试仅对嵌套元素进行排序时，Angular 就会尝试将嵌套元素与容器本身一起排序... 这会导致不需要的行为。

有人有什么想法如何解决这个问题吗？明天我会进一步研究。

- Andre Elrico

---

期望的行为是什么？与当前发生的行为有何差异？ - Jonas Praem

类似于dropzone A，但容器只有一行。@JonasPraem 我认为嵌套拖放很清晰。 - Andre Elrico

我可以将元素从嵌套容器中拖出，但无法在其中拖动。这是问题吗？- 是的，很明显这个问题是关于嵌套拖放的。 - Jonas Praem

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>

编辑了用于定位容器的类

- Borquaye

---

当然。似乎存在一个问题，即在初始加载时它会出现异常，但在软刷新后（例如在HTML中添加空格）就可以正常工作。我认为这可能与渲染器有关。我将尝试看看是否能够解决这个问题，但目前我正在使用以下内容：https://stackblitz.com/edit/angular-1zwcg9-w5rlnk - Borquaye

Answer 2

以下是嵌套拖放的有效代码。

1. 在列表中进行父级到父级的拖放
2. 在列表中进行一个父级内部子级到子级的拖放
3. 在列表中进行一个父级的一个子级到另一个父级的拖放

https://stackblitz.com/edit/angular-ivy-hhnnke?file=src%2Fapp%2Fapp.component.html

- Rajan Kashiyani