Angular drag and drop intersection (e.g. rows and columns in a table)

Question

I'm trying to implement two drag and drops that intersect using cdkDragDrop. While I'd prefer to avoid tables overall, I've created one for the purposes of (hopefully) easier explanation.

Link to 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);
  }

It's straightforward enough to reorder the 'rows' list using cdkDrag, but my question is, "how might I go about reordering the 'columns' in the same component?"

My suspicion is that cdkDropList cannot be used since I don't believe I can add a second cdkDragHandle and cdkDropListDropped to this 'table', so open to suggestions for alternative libraries that might help me achieve the same sort of thing in Angular.

score 1 · Answer 1 · answered Aug 20 '20 at 10:07

Turns out I was mistaken and it is possible. 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);
  }

Angular drag and drop intersection (e.g. rows and columns in a table)

1 Answers1