Angular CDK Drag-Drop向下拖拽报错：insertBefore执行失败求助

报错原因分析 #

你遇到的Uncaught DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.错误，通常是因为拖拽目标容器的DOM结构、拖拽指令配置或数组更新逻辑存在问题，导致CDK无法找到正确的节点插入位置。

具体解决步骤 #

1. 检查下方字段选择面板的拖拽配置

确保da-visual-pivot-field-selection-panel组件内部的列表容器和列表项已正确添加CDK拖拽指令：

<!-- 组件内的列表容器 -->
<div cdkDropList 
     [cdkDropListData]="yourFieldsDataSource" 
     (cdkDropListDropped)="handleDrop($event)">
  <!-- 列表项需添加cdkDrag指令 -->
  <div *ngFor="let field of yourFieldsDataSource; trackBy: trackById" cdkDrag>
    {{field.name}}
  </div>
</div>

2. 配置拖拽容器间的连接关系

上方的每个cdkDropList需要和下方的字段选择面板容器建立连接，添加cdkDropListConnectedTo属性：

<!-- 上方的拖拽容器 -->
<div *ngFor="let sectionData of tableSectionsData"
     cdkDropList
     [cdkDropListData]=sectionData.list
     [cdkDropListConnectedTo]="fieldsDropListId" <!-- 连接到下方容器 -->
     (cdkDropListDropped)="drop($event)"
     da-table-section
     [id]=sectionData.id
     [sectionData]="sectionData"
     (removeField)="removeField($event, sectionData.sectionType)"
     (closeFieldsSelectionPanel)="closePanel()"
>
</div>

在下方组件中给cdkDropList设置唯一ID，或通过@ViewChild获取容器实例传递给上方：

<!-- 下方组件内的容器 -->
<div #fieldsDropList cdkDropList id="fields-selection-container">...</div>

然后在父组件中通过ViewChild获取：

@ViewChild('fieldsDropList') fieldsDropList!: CdkDropList;
fieldsDropListId = this.fieldsDropList.id;

3. 修正drop事件处理逻辑

使用Angular CDK提供的工具函数处理数组操作，避免手动操作DOM：

import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';

drop(event: CdkDragDrop<any[]>) {
  // 同一容器内拖拽
  if (event.previousContainer === event.container) {
    moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
  } else {
    // 跨容器拖拽，确保数据源正确更新
    transferArrayItem(
      event.previousContainer.data,
      event.container.data,
      event.previousIndex,
      event.currentIndex
    );
  }
}

4. 添加trackBy优化DOM渲染

给所有*ngFor循环添加trackBy函数，避免拖拽时DOM节点被重新渲染导致的节点匹配失败：

<!-- 上方列表 -->
<div *ngFor="let sectionData of tableSectionsData; trackBy: trackSectionById">...</div>

<!-- 下方字段列表 -->
<div *ngFor="let field of yourFieldsDataSource; trackBy: trackFieldById">...</div>

组件内定义trackBy函数：

trackSectionById(index: number, section: any) {
  return section.id;
}

trackFieldById(index: number, field: any) {
  return field.id;
}

5. 检查DOM嵌套结构

确保cdkDrag指令直接添加在拖拽项的根元素上，且拖拽项的直接父节点是cdkDropList容器，避免多层嵌套导致CDK无法正确定位节点。

内容的提问来源于stack exchange，提问作者Ortal Blumenfeld Lagziel