Angular 角度8拖放-将文件或文件夹拖放到另一个文件夹中

通过遵循角度CDK文档，我可以轻松地将内容拖放到同一个列表（一维）或另一个列表中

但是，我试图将一个项目（文件夹/链接）放入同一列表（多维）中的另一个项目（文件夹）

对象数组-例如

[
  {
    name: "Alpha",
    id: "Alpha",
    children: [
      {
        name: "Alpha 1",
        id: "Alpha-1",
        children: [
          {
            name: "Alpha 1.1",
            id: "Alpha-1.1"
          },
          {
            name: "Alpha 1.2",
            id: "Alpha-1.2"
          }
        ]
      },
      {
        name: "Alpha 2",
        id: "Alpha-2"
      },
      {
        name: "Alpha 3",
        id: "Alpha-3",
        children: [
          {
            name: "Alpha 3.1",
            id: "Alpha-3.1"
          },
          {
            name: "Alpha 3.2",
            id: "Alpha-3.2"
          }
        ]
      }
    ]
  },
  {
    name: "Beta",
    id: "Beta"
  }
]

在我的结构中，所有有子对象的对象都是文件夹，叶节点是链接。叶节点隐藏在父文件夹中。因此，它在浏览器上形成了一个精确的类似目录的结构

现在，我想将Beta对象移动到Alpha中，以便将其附加到Alpha的子对象。这意味着每个项目都可以放入所有其他可见文件夹中

我尝试将每个项目创建为

cdkDropList

，以便可以将另一个项目拖到其中

示例代码

<mat-nav-list>
  <mat-list-item *ngFor="let item of getReportItems() | reportfilter:filterArg; let i = index" [attr.data-index]="i"
cdkDrag 
[(cdkDragData)]="item"
cdkDragLockAxis="y" 
cdkDragBoundary="mat-nav-list"
cdkDropList
(cdkDragDropped)="drop($event)">
    <a href="javascript:void(0)" class="item-wrapper {i}" (click)="onItemSelected(item)">
        <mat-icon *ngIf="item.children" mat-list-icon>folder</mat-icon>
        <i *ngIf="!item.children" mat-list-icon class="far fa-file-alt"></i>
        <span mat-line [ngClass]="{'objectiveClass': !item.children}">
           {{ item.name }}
        </span>
    </a>
  </mat-list-item>
</mat-nav-list>

在drop事件中，它正确地传递拖动的项数据。但是，如何获取丢弃容器的id？在事件数据中，我发现previousIndex和currentIndex都是0，因为每个节点都是不同的列表。因此，每个列表在第0个索引处只有一个项

---

我不确定我做得是否正确。任何帮助都将不胜感激

在对角度CDK进行了一些研究和演示之后，我意识到CDK拖放不适合我的需要

我通过HTML5拖放实现了预期的结果

有关详细解决方案，请参阅