Javascript Angular6递归列表拖放CDK

我希望得到一个嵌套的递归列表，它可以拖放工作。我试图实现的是，一个内部嵌套列表中的项目可以移动到任何其他嵌套列表或其自己的组中。问题是，我一直在看Stack中的许多不同的例子和问题，但还没有一个成功的想法来实现这一点

以下是我所看到的一些问题和例子：

因此，您可以了解以下是我的数据示例：

每个地区都可以有孩子，每个孩子也可以有孩子。这样就创建了嵌套数据

在我的角度组件中，我每次都使用递归来重新创建标高。请查看此示例：

组件1.ts：

dropGroup(event: CdkDragDrop<string[]>) {
  let area = event.item.data;
  console.log('group', area, event)
}

dropItem(event: CdkDragDrop<string[]>) {
  let area = event.item.data;
  console.log('item', area, event)
}

dropGroup（事件：CdkDragDrop）{
让区域=event.item.data；
console.log（'组'、区域、事件）
}
dropItem（事件：CdkDragDrop）{
让区域=event.item.data；
console.log（'项目'、区域、事件）
}

component.html：

<div cdkDropList #parentList="cdkDropList" (cdkDropListDropped)="dropGroup($event)" [cdkDropListData]="areas">
  <div cdkDropListGroup class="area-wrapper" *ngFor="let area of areas;" cdkDrag [cdkDragData]="area">
    <div class="area-list">
      <div [ngClass]="area.children.length ? 'area-toggle' : 'area'" [style.paddingLeft.px]="area.level > 1 ? area.level*15 : 0">
        <div class="top-wrapper">
          <div class="top-toggle" *ngIf="area.children.length">
            <mat-icon (click)="showChildren(area)" *ngIf="!area.showToggle">keyboard_arrow_right</mat-icon>
            <mat-icon (click)="showChildren(area)" *ngIf="area.showToggle">keyboard_arrow_down</mat-icon>
          </div>
          <span class="area-name">{{ area.name }}</span>
        </div>
        <div class="area-buttons">
          <button class="area-button area-add" mat-icon-button (click)="addNewItem(area)">
            <mat-icon>add</mat-icon>
          </button>
          <button class="area-button area-edit" mat-icon-button (click)="editArea(area)">
            <mat-icon>edit</mat-icon>
          </button>
          <button class="area-button area-delete" mat-icon-button (click)="deletingArea($event, area, area.name)">
            <mat-icon>delete</mat-icon>
          </button>
          <button cdkDragHandle class="drag-handle" mat-icon-button>
            <mat-icon>drag_handle</mat-icon>
          </button>
        </div>
      </div>
      <div class="toggle-children" *ngIf="area.showToggle" cdkDropList (cdkDropListDropped)="dropItem($event)">
        <sp-area-list
        *ngIf="area.children"
        [areas]="area.children"
        (deleteArea)="deletingArea($event, area)"
        (addingArea)="addNewItem($event)"
        (editingArea)="editArea($event)">
        </sp-area-list>
      </div>
    </div>
  </div>
</div>

键盘箭头右键
键盘箭头向下
{{area.name}
添加
编辑
删除
拖柄

每次我尝试不同的示例时，拖放控制台只显示项目从何处开始的容器，而不是移动到何处。。。没有一个例子起作用，也没有帮助我解决我试图实现的目标

有人成功使用CDK拖放嵌套递归列表吗

谢谢你的帮助