Drag and drop and resizing are overlapping-CodePudding

I am trying to combine the drag and drop from angular material with resizing in a table, but, currently, both are overlapping each other. What I would like that once the drag and drop starts, resizing is canceled and vice versa. Any help is useful. Thank you! Here is the repo: https://stackblitz.com/edit/flex-table-column-resize-ekrrrq?file=src/app/app.component.html

CodePudding user response：

You could use handles for each purpose.

example

for drag and drop; instead of

<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>

you could use;

<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>

similar for resizing, instead of;

<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>

you could use;

<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>

maybe better to have handles for both.

I have used mat-icon that you should import the MatIconModule from @angular/material packet to your module.

Stackblitz Edited Version