角度嵌套拖放到另一个列表中

【问题标题】：Angular nested Drag And Drop into another list角度嵌套拖放到另一个列表中
【发布时间】：2021-06-30 02:46:54
【问题描述】：

我有一个场景，我需要将一个功能放到相应的项目中。因此，这里我使用 angular-material 进行拖放，但它正在将功能拖放到项目之外，我想将特征插入到项目内。

这里是示例：https://stackblitz.com/edit/angular-6cshhz-vsskhg?file=src%2Fapp%2Fcdk-drag-drop-connected-sorting-example.html[enter 此处链接描述]1

我需要做什么配置？任何人都可以帮助我吗？谢谢！

【问题讨论】：

标签： angular angular-material drag-and-drop angular-cdk

【解决方案1】：

为了能够拖放，首先将此指令cdkDropListGroup 添加到父元素。

之后更改您的数组 done 以包括丢弃的项目：

  done = [
    {
      name: "Apple",
      items: [] <-- here will be stored the dropped item
    },

之后，将下拉列表移动为每个 done 项目的子项。

  <div cdkDropList [cdkDropListData]="item.items" class="example-list" (cdkDropListDropped)="drop($event)">
    <div class="example-box" *ngFor="let it of item.items" cdkDrag>{{it}}</div>
  </div>

工作Stackblitz。不要忘记“打开”手风琴以查看“下拉列表”。

【讨论】：

谢谢@罗伯特。