Перетаскивание контейнеров внутри другого набора контейнеров перетаскивания

Question

Мне нужно создать вложенные контейнеры для перетаскивания внутри другого набора контейнеров для перетаскивания и иметь возможность перемещать родителей между родителями, а вложенных детей - между детьми. Точно так же, как в ссылке ниже. Может кто-нибудь дать мне какое-нибудь предложение?

https://stackblitz.com/edit/nested-connected-lists

Вот мой код.

<div *ngIf="dataLoaded" cdkDropListGroup>
<div fxFill fxLayoutAlign="start" fxLayout="row wrap" fxLayoutGap="10px">
    <mat-card
        fxLayout="column"
        fxFlex="1 1 10%"
        class="team-component"
        [style.borderColor]="team.color"
        *ngFor="let team of filteredTeams"
        style="padding: 0;"
    >
        <mat-card-header>
            <mat-card-title [style.backgroundColor]="team.color" fxLayout="row">
                <span>{{ team.name }}</span>
                <div
                    *ngIf="team.name !== 'Unassigned Developers'"
                    class="cursor-pointer"
                    fxLayoutAlign="center center"
                    (click)="setAdd(team)"
                >
                    <i class="material-icons md-18 option">person_add</i>
                </div>
            </mat-card-title>
            <mat-card-subtitle>
                {{ team.lead }}
            </mat-card-subtitle>
        </mat-card-header>
        <mat-accordion>
            <mat-expansion-panel
                cdkDropList
                [cdkDropListData]="team.members"
                (cdkDropListDropped)="drop($event, team)"
                [expanded]="accordionExpanded"
            >
                <mat-expansion-panel-header class="expansion-panel-header"></mat-expansion-panel-header>
                <ng-container matExpansionPanelContent *ngFor="let item of team.filteredMembers">
                    <div
                        *ngIf="team.name !== 'Unassigned Developers' || activeMembers.indexOf(item.key) < 0"
                        class="main-table"
                        fxLayout="row"
                        fxLayoutAlign="space-between center"
                        fxLayoutGap="5px"
                        cdkDrag
                        (cdkDragStarted)="drag($event, team)"
                        [cdkDragData]="item"
                        [class.drag-disabled]="
                            (item.key !== draggedMemberKey && dragStarted) || (item.status === 'past' || item.status === 'future')
                        "
                        [class.is-same-emp]="item.key === draggedMemberKey && dragStarted"
                        [cdkDragDisabled]="item.status === 'past' || item.status === 'future'"
                    >
                        <div class="role" fxFlex="15" fxLayoutAlign="center center">
                            <img
                                [src]="item.avatar"
                                alt="avatar"
                                [class.past]="item.status === 'past'"
                                [class.future]="item.status === 'future'"
                            />
                        </div>
                        <div fxLayout="column">
                            <span>{{ item.dateFrom }}</span>
                            <span>{{ item.dateTo }}</span>
                        </div>
                        <div fxFlex="60" fxLayout="column">
                            <a [href]="item.editLink" target="_blank" cdkDragDisabled>{{ item.name }}</a>
                            <span class="seniority">{{ item.role }}</span>
                        </div>
                        <div fxFlex="15" fxLayoutAlign="center">
                            {{ item.availability }}
                            <span>%</span>
                        </div>
                        <pttk-drag-preview *cdkDragPreview [item]="item"></pttk-drag-preview>
                        <div *cdkDragPlaceholder fxLayoutAlign="center center">
                            <p>Ready to be released.</p>
                        </div>
                    </div>
                </ng-container>
            </mat-expansion-panel>
        </mat-accordion>
    </mat-card>
</div>