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>

在Angular材质嵌套树上拖放

0 个答案: