使用ng-drag-drop时，如何在mat-table拖拽行时显示行间放置区域？

核心思路 #

放弃虚拟行方案，改用动态插入可视化放置提示条的方式——利用ng-drag-drop的拖拽事件监听，在拖拽过程中实时计算鼠标在目标行的位置，将预设的提示条插入到对应行的上方/下方，明确提示放置位置，避免和mat-table的动态渲染逻辑冲突。

具体实现步骤 #

• 1. 准备放置提示元素
  在组件模板中定义一个隐藏的提示条，样式做明显区分：

  <div #dropIndicator class="drop-indicator" [style.display]="showIndicator ? 'block' : 'none'"></div>
  

  对应的CSS：

  .drop-indicator {
    height: 2px;
    background-color: #1976d2;
    width: 100%;
    margin: 2px 0;
  }
  

• 2. 绑定ng-drag-drop事件与获取表格行
  给mat-table的行添加拖拽指令，并监听关键事件：

  <mat-table [dataSource]="dataSource">
    <!-- 列定义省略 -->
    <mat-row #tableRow 
             *matRowDef="let row; columns: displayedColumns;"
             [dragData]="row"
             draggable="true"
             (dragstart)="onDragStart($event, row)"
             (dragover)="onDragOver($event, row)"
             (drop)="onDrop($event, row)"
             (dragleave)="onDragLeave()">
    </mat-row>
  </mat-table>
  

  在组件类中获取所有表格行的DOM引用：

  import { ViewChildren, QueryList, ElementRef } from '@angular/core';
  
  @ViewChildren('tableRow') tableRows: QueryList<ElementRef>;
  @ViewChild('dropIndicator') dropIndicator: ElementRef;
  showIndicator = false;
  draggedRow: any;
  

• 3. 处理拖拽事件逻辑

  • 拖拽开始：记录当前拖拽的行数据，显示提示条

    onDragStart(event: DragEvent, row: any) {
      this.draggedRow = row;
      this.showIndicator = true;
      event.dataTransfer!.effectAllowed = 'move';
    }
    

  • 拖拽悬停：计算鼠标位置，插入提示条到对应位置

    onDragOver(event: DragEvent, targetRow: any) {
      event.preventDefault(); // 必须阻止默认行为才能触发drop
      event.stopPropagation();
    
      const targetElement = event.target as HTMLElement;
      const rowElement = targetElement.closest('mat-row') as HTMLElement;
      if (!rowElement) return;
    
      // 判断鼠标在目标行的上半区还是下半区，决定插入位置
      const rect = rowElement.getBoundingClientRect();
      const mouseY = event.clientY;
      const isInsertAbove = mouseY < rect.top + rect.height / 2;
    
      // 将提示条插入到目标行的上方或下方
      const parent = rowElement.parentElement!;
      if (isInsertAbove) {
        parent.insertBefore(this.dropIndicator.nativeElement, rowElement);
      } else {
        parent.insertBefore(this.dropIndicator.nativeElement, rowElement.nextSibling);
      }
    }
    

  • 拖拽离开：隐藏提示条

    onDragLeave() {
      this.showIndicator = false;
    }
    

  • 放置完成：调整数据源顺序，隐藏提示条

    onDrop(event: DragEvent, targetRow: any) {
      event.preventDefault();
      event.stopPropagation();
      this.showIndicator = false;
    
      // 获取拖拽行和目标行的索引
      const draggedIndex = this.dataSource.data.indexOf(this.draggedRow);
      const targetIndex = this.dataSource.data.indexOf(targetRow);
    
      // 调整数据源顺序
      const newData = [...this.dataSource.data];
      newData.splice(draggedIndex, 1);
      // 根据提示条的位置判断插入位置
      const insertIndex = this.dropIndicator.nativeElement.previousElementSibling === targetRow ? targetIndex : targetIndex + 1;
      newData.splice(insertIndex, 0, this.draggedRow);
    
      // 更新数据源
      this.dataSource.data = newData;
    }
    

注意事项 #

• 必须在dragover事件中调用event.preventDefault()，否则drop事件不会触发。
• 如果mat-table使用了分页或排序，需要额外处理数据源的同步，避免拖拽后数据丢失。
• 可根据需求调整提示条样式，比如添加过渡动画，提升交互体验。

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