拖放和调整大小重叠

Question

我正在尝试将 angular material 中的拖放与 table 中的大小调整相结合，但目前，两者相互重叠。我希望一旦拖放开始，调整大小就会被取消，反之亦然。任何帮助都是有用的。谢谢！这是回购协议：https://stackblitz.com/edit/flex-table-column-resize-ekrrrq?file=src/app/app.component.html

Answer 1

您可以为每个目的使用句柄。

示例

用于拖放；而不是

<mat-header-cell
  *matHeaderCellDef
  (mousedown)="onResizeColumn($event, i)"
  cdkDropList
  cdkDropListLockAxis="x"
  cdkDropListOrientation="horizontal"
  (cdkDropListDropped)="dropListDropped($event, i)"
  cdkDrag
  [cdkDragData]="{ name: column.field, columIndex: i }"
  (cdkDragStarted)="dragStarted($event, i)"
>
  {{ column.field }} 
</mat-header-cell>

你可以使用；

<mat-header-cell
  *matHeaderCellDef
  (mousedown)="onResizeColumn($event, i)"
  cdkDropList
  cdkDropListLockAxis="x"
  cdkDropListOrientation="horizontal"
  (cdkDropListDropped)="dropListDropped($event, i)"
  cdkDrag
  [cdkDragData]="{ name: column.field, columIndex: i }"
  (cdkDragStarted)="dragStarted($event, i)"
>
  {{ column.field }} 
  <mat-icon cdkDragHandle>drag_handle</mat-icon> 
</mat-header-cell>

与调整大小相似，而不是；

<mat-header-cell
  *matHeaderCellDef
  (mousedown)="onResizeColumn($event, i)"
  cdkDropList
  cdkDropListLockAxis="x"
  cdkDropListOrientation="horizontal"
  (cdkDropListDropped)="dropListDropped($event, i)"
  cdkDrag
  [cdkDragData]="{ name: column.field, columIndex: i }"
  (cdkDragStarted)="dragStarted($event, i)"
>
  {{ column.field }} 
  <mat-icon cdkDragHandle>drag_handle</mat-icon> 
</mat-header-cell>

你可以使用；

<mat-header-cell
  *matHeaderCellDef
  cdkDropList
  cdkDropListLockAxis="x"
  cdkDropListOrientation="horizontal"
  (cdkDropListDropped)="dropListDropped($event, i)"
  cdkDrag
  [cdkDragData]="{ name: column.field, columIndex: i }"
  (cdkDragStarted)="dragStarted($event, i)"
>
  {{ column.field }} 
  <mat-icon cdkDragHandle>drag_handle</mat-icon> 
  <mat-icon (mousedown)="onResizeColumn($event, i)">switch_left</mat-icon>
</mat-header-cell>

两个都有句柄可能更好。

我使用了 mat-icon，你应该将 MatIconModule 从@angular/material 数据包导入你的模块。

Stackblitz Edited Version

拖放和调整大小重叠

Drag and drop and resizing are overlapping

css

angular

typescript

angular-material

angular9