角形拖放相交例如表格中的行和列

问题描述

我正在尝试使用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",{colName: "B"}
      ]
    }
  ]
  dropRow(row: any,event: CdkDragDrop<string[]>) {
     moveItemInArray(row,event.prevIoUsIndex,event.currentIndex);
  } 

使用cdkDrag可以很容易地对“行”列表进行重新排序，但是我的问题是，“我应该如何对同一组件中的“列”进行重新排序？”

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

解决方法

结果证明我弄错了，这是可能的。 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",{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.currentIndex);
  }