angular - Angular Material 垫台中的cdkDragHandle不起作用

Question

我想知道是否有可能包含一个包含定义为

cdkDragHandle。目前它在整行上都处于事件状态，但我只希望将单个图标用作draghandle

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

<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上定义拖动 handle ，但无济于事。
有人知道如何解决吗？

提前致谢!

Answer 1

看来cdkDragHandle不适用于mat-table。

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

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

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

我会在这里将其发布给需要它的人:

使用cdkDragDisabled属性设置为true初始化表，以禁用整个拖动容器。这允许用户仍然与表格单元格交互，直到它们准备拖动行为止。

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

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

<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