角度拖放交点（例如表格中的行和列）答案

【问题标题】：Angular drag and drop intersection (e.g. rows and columns in a table)角度拖放交点（例如表格中的行和列）
【发布时间】：2020-12-09 03:15:47
【问题描述】：

我正在尝试使用 cdkDragDrop 实现两个相交的拖放。虽然我更愿意整体避免使用表格，但我创建了一个表格是为了（希望）更容易解释。

StackBlitz 的链接：https://stackblitz.com/edit/angular-ivy-4bcutu?

app.component.html

<table cdkDropList (cdkDropListDropped)="dropRow(rows, $event)" >
  <tr>
    <td></td>
    <td *ngFor="let column of rows">
      <div>GrabCol</div>
    </td>
    <td>
  </tr>
  <tr *ngFor="let row of rows;" cdkDrag>
    <td cdkDragHandle> 
      <div>GrabRow</div>
    </td>
    <td *ngFor="let column of row.columns">
      <div>{{column.colName + row.rowName}}</div>
    <td>
  </tr>
</table>

app.component.ts

    rows = [
    {
      rowName : "1", 
      columns : [
        {colName: "A"},
        {colName: "B"}
      ]
    },
    {
      rowName : "2", 
      columns : [
        {colName: "A"},
        {colName: "B"}
      ]
    }
  ]
  dropRow(row: any, event: CdkDragDrop<string[]>) {
     moveItemInArray(row, event.previousIndex, event.currentIndex);
  }

使用 cdkDrag 重新排序“行”列表非常简单，但我的问题是，“我该如何重新排序同一组件中的“列”？”

我的怀疑是 cdkDropList 不能使用，因为我不相信我可以将第二个 cdkDragHandle 和 cdkDropListDropped 添加到这个“表”中，因此对可能帮助我在 Angular 中实现相同目标的替代库的建议持开放态度.

【问题讨论】：

标签： angular angular-material drag-and-drop angular-cdk-drag-drop

【解决方案1】：

原来我错了，这是可能的。 StackBlitz：https://stackblitz.com/edit/angular-ivy-z3cpj2?

app.component.html

<table>
  <thead>
    <tr cdkDropList 
      cdkDropListOrientation="horizontal" 
      [cdkDropListData]="columns" 
      (cdkDropListDropped)="dropCol($event)">
        <th></th>
        <th *ngFor="let column of columns" cdkDrag>GRAB COL</th>
    </tr>
  </thead>
  <tbody cdkDropList [cdkDropListData]="rows" (cdkDropListDropped)="dropRow($event)">
        <tr cdkDrag *ngFor="let row of rows">
          <td cdkDragHandle>GRAB ROW</td>
          <td *ngFor="let cell of columns">{{ cell.colName + row.rowName }}</td>
        </tr>
  </tbody>
</table>

app.component.ts

rows = [
    {
      rowName : "1", 
      columns : [
        {colName: "A"},
        {colName: "B"}
      ]
    },
    {
      rowName : "2", 
      columns : [
        {colName: "A"},
        {colName: "B"}
      ]
    }
  ]
  columns = this.rows.map(x => x.columns).reduce((reduce, val) => {return val}, []);
  dropRow(event) {
    moveItemInArray(this.rows, event.previousIndex, event.currentIndex);
  }
  dropCol(event) {
    moveItemInArray(this.columns, event.previousIndex, event.currentIndex);
  }

【讨论】：