拖放和调整大小重叠

Posted 2023-03-13

【中文标题】拖放和调整大小重叠

【英文标题】：Drag and drop and resizing are overlapping

【发布时间】：2021-12-28 14:45:24

【问题描述】：

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

【参考方案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

【讨论】：

谢谢！！！！现在我只需要找到一种方法来使用不同的光标而不是图标。