角材料垫表中的 cdkDragHandle 无效

Question

我想知道是否有可能有一个包含 mat-icon 定义为的单元格

cdkDragHandle.At 目前它在整行上处于活动状态，但我只想将单个图标用作拖动手柄

这是我正在使用的代码的一部分：

<mat-table #table [dataSource]="dataSource" class="mat-elevation-z8" 
cdkDropList [cdkDropListData]="dataSource"
(cdkDropListDropped)="dropTable($event)">

<ng-container matColumnDef="Order">
  <mat-header-cell *matHeaderCellDef>
    Actions
  </mat-header-cell>
  <mat-cell mat-cell *matCellDef="let element">
    <mat-icon class="dragCursor" cdkDragHandle>reorder</mat-icon>
    {{element.order}}
    <button mat-icon-button (click)="onDeleteClick(element)">
      <mat-icon>delete</mat-icon>
    </button>
  </mat-cell>
</ng-container>

... more column definitions

<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;" cdkDrag    [cdkDragData]="row" cdkDragLockAxis="y"></mat-row>

我还尝试在 mat-cell 上定义拖动手柄，但无济于事。 有人知道如何解决吗？

提前致谢！

Answer 1

cdkDragHandle 似乎不适用于mat-table。

使用最新的 Angular Material 版本进行测试，v. 9.1.0。

Github 上也讨论了这个错误，我在其中找到了以下解决方案： https://github.com/angular/components/issues/13770#issuecomment-506182564 - 作者ajp76054。

我在我的项目中使用过它，它似乎工作正常。

我会在这里发布给需要的人：

---

将cdkDragDisabled 属性设置为true 的表格初始化，以禁用整个拖动容器。这允许用户在准备好拖动行之前仍然与表格单元格进行交互。

然后在拖动手柄元素（<mat-icon>）上，使用(mousedown) 事件将cdkDragDisabled 设置为false。 然后，在(cdkDropListDropped) 事件处理程序中将其重置为true。

因此，在模板中使用以下代码：

<mat-table 
   #table 
   [dataSource]="dataSource" 
   cdkDropList 
   (cdkDropListDropped)="drop($event)" 
   cdkDropListData="dataSource" 
   [cdkDropListDisabled]="dragDisabled">

 ...

 <ng-container matColumnDef="order">
   <mat-header-cell *matHeaderCellDef>Order</mat-header-cell>
   <mat-cell *matCellDef="let element"> 
    <mat-icon class="dragCursor" (mousedown)="dragDisabled = false;">reorder</mat-icon>
   </mat-cell>
 </ng-container>

 ...

 <mat-row *matRowDef="let row; columns: displayedColumns;" cdkDrag [cdkDragData]="row"></mat-row>


</mat-table>

在组件ts 文件中：

export class TableBasicExample {
  dragDisabled = true;

  drop(event: CdkDragDrop<any[]>) {
    // Return the drag container to disabled.
    this.dragDisabled = true;

    // other code on drop event
    // 
    const previousIndex = this.dataSource.findIndex((d) => d === event.item.data);

    moveItemInArray(this.dataSource, previousIndex, event.currentIndex);
this.table.renderRows();
  }

}

工作示例

https://stackblitz.com/edit/angular-materials-table-with-drag-and-drop-nvyyy4