Angular中支持横竖拖拽的动态二维矩阵组件开发求助

一、基于Angular Material CDK原生实现（优先推荐） #

你已经在用CDK拖拽组件，直接扩展就能实现需求，无需额外引入第三方库：

1. 垂直拖拽实现 #

将水平拖拽的结构嵌套到垂直拖拽列表中，通过cdkDropListOrientation区分方向：

• 外层容器设置为垂直拖拽列表，绑定垂直拖拽回调处理行交换；
• 内层每行保持原有水平拖拽列表，处理列内元素交换。

核心代码示例：

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

// 组件类中定义矩阵数据与拖拽回调
matrix: any[][] = [['A1','A2'], ['B1','B2']];

onVerticalDrop(event: CdkDragDrop<any[]>) {
  moveItemInArray(this.matrix, event.previousIndex, event.currentIndex);
}

onHorizontalDrop(event: CdkDragDrop<any[]>, rowIndex: number) {
  moveItemInArray(this.matrix[rowIndex], event.previousIndex, event.currentIndex);
}

模板结构：

<div cdkDropList cdkDropListOrientation="vertical" (cdkDropListDropped)="onVerticalDrop($event)">
  <!-- 每行作为可拖拽的组 -->
  <div *ngFor="let row of matrix; let rowIdx = index" cdkDrag>
    <div cdkDropList cdkDropListOrientation="horizontal" (cdkDropListDropped)="onHorizontalDrop($event, rowIdx)">
      <div *ngFor="let item of row" cdkDrag>{{ item }}</div>
    </div>
  </div>
</div>

2. 组拖拽（整行/整列） #

• 整行拖拽：上面模板中已经把cdkDrag绑定在行容器上，拖拽时会带动整行元素，直接复用垂直拖拽逻辑即可。
• 整列拖拽：需要先将矩阵转置，把列转为行结构处理拖拽，完成后再转置回原矩阵：

  transposeMatrix(matrix: any[][]): any[][] {
    return matrix[0].map((_, colIdx) => matrix.map(row => row[colIdx]));
  }
  
  onColumnDrop(event: CdkDragDrop<any[]>) {
    const transposed = this.transposeMatrix(this.matrix);
    moveItemInArray(transposed, event.previousIndex, event.currentIndex);
    this.matrix = this.transposeMatrix(transposed);
  }
  

二、第三方库推荐（原生实现复杂时可选） #

• @angular-skyhook/drag-drop：基于CDK封装的增强库，内置组拖拽、跨维度拖拽支持，API更简洁，适合快速搭建复杂拖拽场景。
• ngx-drag-drop：轻量级拖拽组件库，支持二维矩阵拖拽，配置简单，文档易懂，新手友好。

三、新手避坑提示 #

• 确保在模块中导入DragDropModule，所有拖拽指令依赖该模块才能生效；
• 动态增减行列后，要保证矩阵数据与模板绑定同步，避免拖拽逻辑出现异常；
• 测试空行、空列等边界场景，在拖拽回调中加入非空判断防止报错。

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