Angular CDK嵌套数组拖拽问题：拖至顶部时previousIndex始终为0

问题描述 #

使用Angular CDK Drag and Drop处理嵌套数组时，出现排序异常：将元素拖拽到列表顶部时，CdkDragDrop事件返回的previousIndex始终为0；拖拽到底部时，previousIndex能正确显示原位置。

已做检查 #

• 正确应用了cdkDrag和cdkDropList指令
• 正确绑定了cdkDropListData到嵌套数组
• 已打印事件对象，确认previousIndex和currentIndex的异常值

行为对比 #

预期行为：无论拖拽到列表顶部还是底部，previousIndex都应准确反映拖拽元素的原始位置。
实际行为：拖拽到顶部时previousIndex始终为0，拖拽到底部时显示正常。

相关代码 #

<div *ngIf="item">
    <div cdkDropList class="item-dropzone parent" [id]="parentItemId"
        [cdkDropListData]="parentItem" [cdkDropListConnectedTo]="allDropListsIds">

        <div cdkDrag [id]="item.uId" [cdkDragData]="item" [cdkDragDisabled]="dragDisabled 
            || item.folderName === 'Global Predefined Searches' && !isGlobalUser" class="drag-item">
                
            <div title="Drag this item with children" class="item-drag-handle" cdkDragHandle
                [ngClass]="{'expanded': item.expanded,'collapsed': !item.expanded}">

                <i *ngIf="!dragDisabled && item.folderName !== 'Global Predefined Searches' && !isGlobalUser
                || !dragDisabled && item.folderName === 'Global Predefined Searches' && isGlobalUser 
                || !dragDisabled && item.folderName === 'Saved Searches' && isGlobalUser" class="material-icons">
                    drag_indicator
                </i>

                <mat-icon cdkDrag *ngIf="item.expanded && item.nested" aria-hidden="false"
                    (click)="toggleHeight(item.uId, item.expanded)" aria-label="expanded" aria-describedby="expanded"
                    aria-labelledby="expanded" class="material-icons-outlined saved__indeterminate ">
                    indeterminate_check_box
                </mat-icon>

                <span *ngIf="!item.expanded && item.nested" aria-hidden="false" aria-label="expand"
                    (click)="toggleHeight(item.uId, item.expanded)" aria-describedby="expand" aria-labelledby="expand"
                    class="material-icons-outlined">
                    add_box
                </span>

                <mat-icon
                    *ngIf="item.folderName === 'Global Predefined Searches' && isGlobalUser || item.folderName === 'Saved Searches'"
                    (click)="editFolderName($event, item.name, item.uId, item.name, item)" aria-hidden="false"
                    aria-label="edit folder name" aria-describedby="edit folder name"
                    aria-labelledby="band-button-2 band-text-2" class="search">
                    search
                </mat-icon>

                <span *ngIf="item.nested" aria-hidden="false" aria-label="folder" aria-describedby="folder"
                    aria-labelledby="folder" class="material-icons-outlined folder">
                    folder
                </span>

                <div (click)="searchToEdit($event, item, item.nested)" class="search-btn" [ngClass]="{ 'search-btn__selected' : item.isSelected && item.folderName !== 'Global Predefined Searches' || isGlobalUser && item.isSelected && item.folderName === 'Global Predefined Searches',
                     'search-btn__clickable' : !item.nested}">
                    {{item.name}}
                </div>

            </div>

            <div class="item-drag-preview" *cdkDragPreview>
                {{item.name}}
            </div>

        </div>

        <ul cdkDropList class="item-dropzone" [id]="item.uId" [cdkDropListConnectedTo]="connectedDropListsIds"
            [cdkDropListData]="item" (cdkDropListDropped)="onDragDrop($event)" class="children"
            [ngClass]="{'notNested': !item.nested}">

            <ng-container *ngFor="let subItem of item.groups; let i= index">
                <div cdkDrag [ngClass]="{'expanded': item.expanded,'collapsed': !item.expanded}">
                    <div [ngClass]="{'notNestedPadding': !item.nested}">
                        <app-saved-searches-list [item]="subItem" [parentItem]="item" class="subItem"
                            [connectedDropListsIds]="allDropListsIds" (itemDrop)="onDragDrop($event)">
                        </app-saved-searches-list>
                    </div>
                </div>
            </ng-container>

        </ul>
    </div>
</div>

排查思路与解决建议 #

1. 修正嵌套列表的数据源绑定 #

子级cdkDropList当前绑定的cdkDropListData是item，但循环渲染的是item.groups，数据源不匹配会直接导致索引计算错误。修改子级列表的数据源绑定：

<ul cdkDropList class="item-dropzone" [id]="item.uId" [cdkDropListConnectedTo]="connectedDropListsIds"
    [cdkDropListData]="item.groups" (cdkDropListDropped)="onDragDrop($event)" class="children"
    [ngClass]="{'notNested': !item.nested}">

2. 避免跨层级事件重复处理 #

代码中父组件和子组件app-saved-searches-list都绑定了onDragDrop处理函数，事件冒泡或重复触发会干扰索引计算。建议：

• 子组件内部单独处理自身的拖拽事件，避免直接传递父组件的处理函数
• 在父组件的onDragDrop中，通过event.previousContainer和event.currentContainer判断拖拽容器，针对性处理不同层级的拖拽逻辑

3. 检查拖拽项的DOM渲染稳定性 #

拖拽项外层的*ngIf="item"和动态ngClass（expanded/collapsed）可能导致拖拽过程中DOM重新渲染，破坏CDK对元素原始位置的追踪。建议：

• 移除或简化拖拽项父容器的动态渲染逻辑，测试是否仍存在异常
• 确保cdkDrag直接绑定到循环生成的元素上，避免额外层级包裹干扰位置识别

4. 调试完整事件上下文 #

在onDragDrop函数中打印完整的拖拽事件对象，确认容器和索引的对应关系：

onDragDrop(event: CdkDragDrop<any[]>) {
  console.log('原容器数据:', event.previousContainer.data);
  console.log('目标容器数据:', event.currentContainer.data);
  console.log('原索引:', event.previousIndex);
  console.log('目标索引:', event.currentIndex);
  // 其他处理逻辑
}

5. 升级Angular CDK版本 #

部分旧版本CDK存在嵌套拖拽的索引计算bug，建议升级到最新稳定版（如@angular/cdk@16+），验证是否修复该问题。

内容的提问来源于stack exchange，提问作者FitzNYC