Angular CDK拖拽：禁用占位符，保留原Mat Table行

针对你的嵌套树形Mat Table拖拽场景，核心问题是CDK Drag默认会用无Angular绑定的DOM副本替换原行，导致样式和事件失效。以下是具体解决方案：

核心思路 #

通过自定义拖拽预览模板和占位符模板，替代CDK的默认行为，确保预览元素带完整绑定和样式，同时让占位符模拟原行的视觉与交互效果。

具体实现 #

1. 定义预览与占位符模板 #

在组件模板中添加两个模板，分别用于拖拽预览和原位置占位符：

<!-- 拖拽预览模板：与原行结构/逻辑完全一致，确保样式和事件生效 -->
<ng-template #dragPreview let-row>
  <tr mat-row 
      [ngClass]="getTableRowClasses(row.item)"
      [hidden]="!isPathToRootExpanded(row)">
    <td *ngFor="let col of getColumns()">
      <!-- 复制原行的列内容逻辑，包括树形缩进、展开按钮等 -->
      <ng-container [ngTemplateOutlet]="getColumnTemplate(col)" [ngTemplateOutletContext]="{ $implicit: row.item }"></ng-container>
    </td>
  </tr>
</ng-template>

<!-- 占位符模板：模拟原行样式，保留原位置的视觉与交互 -->
<ng-template #dragPlaceholder let-row>
  <tr mat-row 
      [ngClass]="getTableRowClasses(row.item)"
      [hidden]="!isPathToRootExpanded(row)"
      (mouseenter)="updateDropTargetRow(row.item, false)"
      (mouseleave)="updateDropTargetRow(row.item, true)">
    <td *ngFor="let col of getColumns()">
      <ng-container [ngTemplateOutlet]="getColumnTemplate(col)" [ngTemplateOutletContext]="{ $implicit: row.item }"></ng-container>
    </td>
  </tr>
</ng-template>

2. 修改原行的CDK Drag绑定 #

将模板绑定到cdkDrag指令，传递行数据到模板，并保留原有的事件与配置：

<tr mat-row *matRowDef="let row; columns: getColumns()"
    cdkDrag
    [cdkDragDisabled]="!allowDragDrop || isEditing(row.item)"
    [hidden]="!isPathToRootExpanded(row)"
    [ngClass]="getTableRowClasses(row.item)"
    (click)="toggleSelection(row.item)"
    (cdkDragStarted)="onDragStarted(row.item)"
    (mousemove)="onDragMouseMove($event)"
    <!-- 绑定自定义预览模板与数据 -->
    [cdkDragPreview]="dragPreview"
    [cdkDragPreviewData]="row"
    <!-- 绑定自定义占位符模板与数据 -->
    [cdkDragPlaceholder]="dragPlaceholder"
    [cdkDragPlaceholderData]="row">
</tr>

3. 组件类中获取模板引用 #

在组件类中添加模板引用，确保Angular能正确识别自定义模板：

import { Component, ViewChild, TemplateRef } from '@angular/core';

@Component({
  // 组件配置
})
export class YourTreeTableComponent {
  @ViewChild('dragPreview') dragPreview!: TemplateRef<any>;
  @ViewChild('dragPlaceholder') dragPlaceholder!: TemplateRef<any>;

  // 你的现有方法：getColumns()、getTableRowClasses()、isPathToRootExpanded()等
}

关键说明 #

• 预览模板使用Angular渲染而非DOM副本，因此会保留所有样式绑定与逻辑，解决拖拽元素无高亮/指示器的问题。
• 占位符模板完全复用原行的样式与事件绑定，确保原位置的行依然能响应鼠标交互。
• 如果不需要占位符的视觉效果，可将占位符模板的opacity设为0，实现“原行保留”的视觉体验。

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