拖放到 Angular 材质嵌套树上

Question

我正在尝试在 Angular 材质嵌套树上实现拖放。树本身和拖放逻辑运行良好。
问题是我无法定位正确的节点以将拖动的元素放入其中
例如我有这样的结构：

如果我尝试更改元素的位置，例如 Child1 从 Group2 并将其移动到 Group1，它将无法正常工作

=>

如您所见，Child1 现在与 Group1 和 Group2 处于同一级别。我想再次提及 drop() 函数工作正常，因为它返回正确的索引。它只是根据它收到的索引更改数组中的元素位置，这意味着它从开头得到错误的索引

所以问题应该出在标记或CSS中。
我花了很多时间试图理解这个问题。希望你能帮助我。

这是我的材料树的简化代码：

        <mat-tree [dataSource]="DataSource" [treeControl]="TreeControl" cdkDropList
            (cdkDropListDropped)="drop($event)">
            <mat-nested-tree-node *matTreeNodeDef="let node; when: hasNestedChild" cdkDrag [cdkDragData]="node">
                <li>
                    <div>
                        <div fxLayout="row" fxLayoutAlign="start center"
                            [class.bg-primary]="selected && node.id === selected.id">
                            <button mat-icon-button matTreeNodeToggle [disabled]="node.isEmpty">
                                <mat-icon insert="true">
                                    {{TreeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
                                </mat-icon>
                            </button>
                        </div>
                    </div>
                    <ul [class.primary]="selected && node.id === selected.id"
                        [class.tree-invisible]="!TreeControl.isExpanded(node) ">
                        <ng-container matTreeNodeOutlet></ng-container>
                    </ul>
                </li>
            </mat-nested-tree-node>
            <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle cdkDrag [cdkDragData]="node">
                <li>
                    {{node.id}}: {{node.caption}} &nbsp;
                    <a matTooltip="Open Test Suite" [routerLink]="['/link', node.id]">
                        <mat-icon inline="true">
                            open_in_new
                        </mat-icon>
                    </a>
                </li>
            </mat-tree-node>
            <mat-tree-node *matTreeNodeDef="let node; when: isLoadMore">
                <p>and {{node.name}} more...</p>
                <button mat-icon-button matTooltip="Load" (click)="loadMore(node.id)">
                    <mat-icon>loop</mat-icon>
                </button>
            </mat-tree-node>
        </mat-tree>