角材料垫台中的cdkDragHandle不起作用 [英] cdkDragHandle in angular material mat-table has no effect

问题描述

我想知道是否有一个单元格包含定义为的垫子图标

I want to know if it is possible to have a cell that contains a mat-icon defined as

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

cdkDragHandle.At the moment it is active on the full row but I just want the single icon to be used as draghandle

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

This is part of the code I'm using:

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

I also tried to define the draghandle on the mat-cell to no avail. Does anybody know how this can be solved?

提前谢谢！

推荐答案

cdkDragHandle不适用于mat-table.

使用最新的Angular Material版本( 9.1.0 )进行了测试.

Tested with latest Angular Material version, v. 9.1.0.

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

This bug was also discussed on Github, where I've found the following solution: https://github.com/angular/components/issues/13770#issuecomment-506182564 - author ajp76054.

我已经在项目中使用了它，看起来还可以.

I've used it in my project and it seems to work ok.

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

I'll post it here for those who will need it:

使用设置为true的cdkDragDisabled属性初始化表，以禁用整个拖动容器.这样，用户就可以与表格单元格进行交互，直到它们准备拖动行为止.

Initialize the table with cdkDragDisabled property set to true, in order to disable the whole drag container. This allows the user to still interact with the table cells until they are ready to drag the row.

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

Then on the drag handle element (<mat-icon>), use (mousedown) event to set the cdkDragDisabled to false. Then, reset it to true inside the (cdkDropListDropped) event handler.

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

So, in the template use the following code:

<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不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！