Angular 拖放：cdk 将项目拖放到嵌套的 cdkDropList 中

Question

Stackblitz 展示问题：https://stackblitz.com/edit/angular-ivy-tzyvbe?file=src%2Fapp%2Fapp.component.html

我有一个外层的cdkDropListGroup，里面有两个cdkDropLists。

第一个cdkDropList也有两个下拉列表。

我希望能够将 cdkDrag 项目放入第一个 cdkDropList 中，但如果放入其中，也可以放入其中的嵌套 cdkDropLists 中。

您可以看到我正在记录您将项目放入其中的下拉列表，它始终是外部下拉列表 ID。

我怎样才能放入嵌套的下拉列表中，或者这是否可能？

Answer 1

您应该使用 cdkDropList 的 [cdkDropListConnectedTo] 属性来指定可以将容器中的物品转移到的其他连接的容器。 cdkDropListGroup 会自动为其子项执行此操作。这是您的 stackblitz 中经过编辑的示例代码。

<div cdkDropListGroup>
  <div cdkDropList class="page-list-1" (cdkDropListEntered)="drop('page')">
    <div
      cdkDropList
      id="dropList1"
      class="page-list-2"
      (cdkDropListEntered)="drop('list-1')"
    ></div>

    <div
      cdkDropList
      id="dropList2"
      class="page-list-3"
      (cdkDropListEntered)="drop('list-2')"
    ></div>
  </div>

  <div
    cdkDropList
    [cdkDropListConnectedTo]="['dropList1', 'dropList2']"
    class="components"
  >
    <div cdkDrag class="item">Hi</div>
  </div>
</div>

Angular 拖放：cdk 将项目拖放到嵌套的 cdkDropList 中

Angular Drag & Drop: cdkDrag item dropping in nested cdkDropLists

angular

angular-cdk

angular-cdk-drag-drop