如何为Angular Material数据表行添加拖拽功能？

这个问题我之前帮不少开发者解决过——Angular Material的表格确实因为自动生成DOM元素，让直接给行加draggable属性有点棘手，但有两个靠谱的方案可以搞定，其中第一个更符合Angular的最佳实践：

方案一：自定义表格行模板（推荐） #

Angular Material的MatTable允许你完全控制行的渲染逻辑，只需要在*matRowDef指令中自定义<tr>元素，就能直接添加draggable属性和拖拽事件绑定，完全不需要手动操作DOM。

模板代码示例 #

<table mat-table [dataSource]="dataSource">
  <!-- 这里是你的列定义，比如： -->
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef> 名称 </th>
    <td mat-cell *matCellDef="let row"> {{row.name}} </td>
  </ng-container>

  <!-- 自定义行模板，直接添加draggable和事件 -->
  <tr mat-row 
      *matRowDef="let row; columns: displayedColumns;" 
      draggable="true"
      (dragstart)="onRowDragStart($event, row)"
      (dragend)="onRowDragEnd($event)">
  </tr>
</table>

<!-- 拖拽目标区域示例 -->
<div class="drop-zone" (dragover)="onDragOver($event)" (drop)="onDrop($event)">
  将行拖拽到这里
</div>

组件代码示例 #

import { Component } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';

// 定义你的行数据类型
interface RowData {
  id: number;
  name: string;
}

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent {
  displayedColumns: string[] = ['name'];
  dataSource = new MatTableDataSource<RowData>([
    {id: 1, name: '行1'},
    {id: 2, name: '行2'}
  ]);

  onRowDragStart(event: DragEvent, row: RowData) {
    // 把行数据存入dataTransfer，方便目标区域获取
    event.dataTransfer!.setData('application/json', JSON.stringify(row));
    // 添加样式标识正在拖拽的行
    (event.target as HTMLElement).classList.add('dragging');
  }

  onRowDragEnd(event: DragEvent) {
    // 清除拖拽样式
    (event.target as HTMLElement).classList.remove('dragging');
  }

  // 处理拖拽目标区域的dragover事件（必须阻止默认行为才能触发drop）
  onDragOver(event: DragEvent) {
    event.preventDefault();
    (event.target as HTMLElement).classList.add('drop-active');
  }

  onDrop(event: DragEvent) {
    event.preventDefault();
    (event.target as HTMLElement).classList.remove('drop-active');
    
    // 获取拖拽的行数据
    const rowData = JSON.parse(event.dataTransfer!.getData('application/json')) as RowData;
    console.log('拖拽的行数据:', rowData);
    // 这里添加你处理拖拽数据的逻辑
  }
}

方案二：通过ViewChild操作DOM（适合无法自定义行模板的场景） #

如果因为某些限制不能自定义行模板，你可以通过ViewChild获取MatTable实例，在表格渲染完成后手动给生成的行添加draggable属性和事件监听。需要注意的是，要监听数据源的变化，确保数据更新后重新处理行元素。

组件代码示例 #

import { Component, ViewChild, AfterViewInit, OnDestroy } from '@angular/core';
import { MatTable, MatTableDataSource } from '@angular/material/table';
import { Subscription } from 'rxjs';

interface RowData {
  id: number;
  name: string;
}

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements AfterViewInit, OnDestroy {
  displayedColumns: string[] = ['name'];
  dataSource = new MatTableDataSource<RowData>([
    {id: 1, name: '行1'},
    {id: 2, name: '行2'}
  ]);
  
  @ViewChild(MatTable) table!: MatTable<RowData>;
  private dataSubscription?: Subscription;

  ngAfterViewInit() {
    // 监听数据源变化，确保数据更新后重新给行添加draggable属性
    this.dataSubscription = this.dataSource.connect().subscribe(() => {
      this.addDraggableToRows();
    });
  }

  private addDraggableToRows() {
    // 获取所有自动生成的mat-row元素
    const rows = this.table._elementRef.nativeElement.querySelectorAll('tr.mat-row');
    
    rows.forEach((row: HTMLElement) => {
      row.draggable = true;
      // 添加拖拽事件监听
      row.addEventListener('dragstart', (event) => this.onRowDragStart(event, row));
      row.addEventListener('dragend', (event) => this.onRowDragEnd(event));
    });
  }

  onRowDragStart(event: DragEvent, rowElement: HTMLElement) {
    // 通过行元素的索引获取对应的数据
    const rowIndex = Array.from(rowElement.parentElement!.children).indexOf(rowElement);
    const rowData = this.dataSource.data[rowIndex];
    
    event.dataTransfer!.setData('application/json', JSON.stringify(rowData));
    rowElement.classList.add('dragging');
  }

  onRowDragEnd(event: DragEvent) {
    (event.target as HTMLElement).classList.remove('dragging');
  }

  // 拖拽目标区域的处理逻辑和方案一一致，这里省略

  ngOnDestroy() {
    // 取消订阅防止内存泄漏
    this.dataSubscription?.unsubscribe();
    // 移除事件监听
    const rows = this.table._elementRef.nativeElement.querySelectorAll('tr.mat-row');
    rows.forEach((row: HTMLElement) => {
      row.removeEventListener('dragstart', this.onRowDragStart);
      row.removeEventListener('dragend', this.onRowDragEnd);
    });
  }
}

注意事项 #

• 优先选择方案一，因为直接操作DOM（方案二）可能会因Angular的变化检测导致属性被重置，需要额外处理数据源变化的情况。
• 拖拽目标区域必须监听dragover事件并阻止默认行为，否则drop事件不会触发。
• 可以添加CSS样式优化拖拽体验，比如给.dragging类添加半透明效果，给.drop-active类添加边框高亮。

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