Angular树形组件替换ng2-dnd为CDK DnD后拖拽失效求助

我正在尝试给Angular树形组件替换拖拽方案——用Angular CDK DnD替代原来的ng2-dnd。之前用ng2-dnd时就出现了拖拽失效的问题，换成CDK DnD的代码后，拖拽功能还是没法正常工作，需要帮忙排查问题并指导完成正确替换。

原有ng2-dnd代码 #

<div class="tree">
    <tree-root
      #tree
      id="tree2"
      [focused]="true"
      [nodes]="nodes"
      [options]="options"
    >
      <ng-template
        #treeNodeFullTemplate
        let-node
        let-index="index"
        let-templates="templates"
      >
        <div
          dnd-sortable-container 
          [sortableData]="dropDataInComponent"
          [dropZones]="['level-2-' + index]"
        >
          <div 
              dnd-sortable 
              [sortableIndex]="index"
              (dragstart)="onDragStart(node.data)"
              [dragEnabled]="node.data.level == 2" 
              (dragend)="onDragEnd(nodes)" 
              style="display: flex; gap: 4px; padding: 6px" class="mg-15">
            <tree-node-expander
              class="tree-node-expander-arrow"
              [node]="node"
            ></tree-node-expander>
          </div>
          <tree-node-children
            [node]="node"
            [templates]="templates"
          ></tree-node-children>
        </div>
      </ng-template>
    </tree-root>
  </div>

替换后的Angular CDK DnD代码 #

<div class="tree">
    <tree-root
      #tree
      id="tree2"
      [focused]="true"
      [nodes]="nodes"
      [options]="options"
    >
      <ng-template
        #treeNodeFullTemplate
        let-node
        let-index="index"
        let-templates="templates"
      >
        <div
          cdkDropList
          [cdkDropListData]="node"
          (cdkDropListDropped)="drop($event, node)"
        >
          <div 
              cdkDrag
              [cdkDragData]="node.substructures"
              style="display: flex; gap: 4px; padding: 6px" class="mg-15">
            <tree-node-expander
              class="tree-node-expander-arrow"
              [node]="node"
            ></tree-node-expander>
          </div>
          <tree-node-children
            [node]="node"
            [templates]="templates"
          ></tree-node-children>
        </div>
      </ng-template>
    </tree-root>
  </div>

核心问题排查与修正方案 #

• 基础模块未导入：确认你的Angular模块中已导入DragDropModule（从@angular/cdk/drag-drop引入），这是CDK拖拽生效的必要前提
• 容器与拖拽项数据绑定错误：
  • 原ng2-dnd的dnd-sortable-container对应CDK的cdkDropList，需绑定可排序的节点数组（比如当前节点的子节点列表node.children），而非单个node
  • 拖拽项cdkDrag的cdkDragData应绑定当前节点数据node.data，而非node.substructures
• 拖拽范围与启用条件缺失：
  • 原代码的dropZones对应CDK的cdkDropListConnectedTo，需配置匹配的拖拽区域标识
  • 原代码的[dragEnabled]="node.data.level == 2"需替换为CDK的[cdkDragDisabled]="node.data.level !== 2"，实现非level2节点禁用拖拽
• 事件处理未对齐：
  • 原dragstart/dragend对应CDK的cdkDragStarted/cdkDragEnded事件
  • drop方法需正确实现节点排序/移动逻辑，使用CDK提供的moveItemInArray和transferArrayItem工具函数

修正后的示例代码 #

模板代码 #

<div class="tree">
    <tree-root
      #tree
      id="tree2"
      [focused]="true"
      [nodes]="nodes"
      [options]="options"
    >
      <ng-template
        #treeNodeFullTemplate
        let-node
        let-index="index"
        let-templates="templates"
      >
        <div
          cdkDropList
          [cdkDropListData]="node.children || []"
          [cdkDropListConnectedTo]="['level-2-' + index]"
          (cdkDropListDropped)="drop($event)"
        >
          <div 
              cdkDrag
              [cdkDragDisabled]="node.data.level !== 2"
              [cdkDragData]="node.data"
              (cdkDragStarted)="onDragStart(node.data)"
              (cdkDragEnded)="onDragEnd(nodes)"
              style="display: flex; gap: 4px; padding: 6px" class="mg-15">
            <tree-node-expander
              class="tree-node-expander-arrow"
              [node]="node"
            ></tree-node-expander>
          </div>
          <tree-node-children
            [node]="node"
            [templates]="templates"
          ></tree-node-children>
        </div>
      </ng-template>
    </tree-root>
  </div>

组件逻辑代码 #

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
    );
  }
}

onDragStart(data: any) {
  // 原拖拽开始逻辑，保持不变
}

onDragEnd(nodes: any[]) {
  // 原拖拽结束逻辑，保持不变
}

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