Angular CDK嵌套拖拽异常：无法将IT项移入其他IT项子列表

核心问题分析 #

问题根源在于嵌套cdkDropList的连接关系配置错误，子列表未被正确识别为可放置区域，同时存在动态生成列表时id绑定不规范、拖拽事件处理逻辑缺失的情况。

具体修复步骤 #

1. 为每个cdkDropList绑定唯一动态ID
   确保父级和子级拖拽列表都有唯一标识，基于数据项的id生成即可：

   <!-- 父级列表 -->
   <div cdkDropList [id]="'list-' + item.id" ...>
     <!-- 子级列表 -->
     <div cdkDropList [id]="'sub-list-' + child.id" ...>
     </div>
   </div>
   

2. 正确配置cdkDropListConnectedTo
   最简便的方式是使用cdkDropListGroup自动管理所有嵌套列表的连接关系，无需手动指定：

   <div cdkDropListGroup>
     <!-- 所有嵌套的cdkDropList都放入该组内 -->
     <div *ngFor="let item of items" cdkDropList [id]="'list-' + item.id">
       <div cdkDrag>{{ item.name }}</div>
       <div *ngIf="item.children.length">
         <div cdkDropList [id]="'sub-list-' + item.id">
           <div *ngFor="let child of item.children" cdkDrag>{{ child.name }}</div>
         </div>
       </div>
     </div>
   </div>
   

   若需手动指定连接，可在组件类中通过ViewChildren获取所有列表ID并动态绑定：

   @ViewChildren(CdkDropList) dropLists!: QueryList<CdkDropList>;
   connectedDropLists: string[] = [];
   
   ngAfterViewInit() {
     this.updateConnectedLists();
     this.dropLists.changes.subscribe(() => this.updateConnectedLists());
   }
   
   private updateConnectedLists() {
     this.connectedDropLists = this.dropLists.map(list => list.id);
   }
   

   模板中绑定：

   <div cdkDropList [cdkDropListConnectedTo]="connectedDropLists" ...>
   

3. 完善拖拽事件处理逻辑
   在drop事件中，需正确处理嵌套数据结构的更新，将拖拽项从原数组移除并添加到目标子列表：

   drop(event: CdkDragDrop<any[]>) {
     if (event.previousContainer !== event.container) {
       // 跨容器拖拽：移除原项并添加到目标容器
       const draggedItem = event.previousContainer.data.splice(event.previousIndex, 1)[0];
       event.container.data.push(draggedItem);
     } else {
       // 同容器内排序
       moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
     }
   }
   

验证修复 #

完成上述修改后，拖拽父级IT项时，子列表会被正确识别为可放置区域，即可实现将IT1移入IT3子列表的预期效果。

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