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

Question

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

我有一个外部 cdkDropListGroup，内部有两个 cdkDropLists。

第一个 cdkDropList 中还有两个下拉列表。

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

您可以看到我正在记录您将项目放入的 dropList，它始终是外部 droplist 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>