Question

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

cdkDragHandle。目前它在整行上都处于活动状态，但我只希望将单个图标用作拖动句柄

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

<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。然后，将其重置为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

角材料垫台中的cdkDragHandle不起作用

1 个答案:

工作示例