Angular Material拖拽与表格列调整大小功能冲突如何实现互斥？

实现逻辑 #

通过新增全局互斥状态锁，保证同一时间仅能激活一种操作，两种功能触发前先校验状态，避免重叠冲突。

具体实现步骤 #

• 第一步：组件类中声明两个互斥状态变量
  代码：isResizing = false; isDragging = false;
• 第二步：为列调整功能绑定状态更新逻辑
  调整大小启动时将isResizing设为true，调整结束（鼠标松开、鼠标离开目标区域）时重置为false；调整大小触发前先校验isDragging状态，若为true直接终止当前调整操作。
• 第三步：为拖拽功能添加触发校验逻辑
  拖拽启动时先判断isResizing状态，若为true直接调用拖拽实例的cancel方法终止本次拖拽；拖拽启动成功后将isDragging设为true，拖拽结束后重置为false。

核心代码示例 #

组件TS逻辑 #

import { CdkDragStart } from '@angular/cdk/drag-drop';

// ...组件内部代码
isResizing = false;
isDragging = false;

// 列调整启动触发
handleResizeStart(): void {
  if (this.isDragging) return;
  this.isResizing = true;
}

// 列调整结束触发
handleResizeEnd(): void {
  this.isResizing = false;
}

// 拖拽启动触发
handleDragStart(event: CdkDragStart): void {
  if (this.isResizing) {
    event.source._dragRef.cancel();
    return;
  }
  this.isDragging = true;
}

// 拖拽结束触发
handleDragEnd(): void {
  this.isDragging = false;
}

模板绑定示例 #

<!-- 列头部，同时绑定拖拽和调整功能 -->
<th 
  cdkDrag
  (cdkDragStart)="handleDragStart($event)"
  (cdkDragEnded)="handleDragEnd()"
>
  列名称
  <!-- 调整大小手柄 -->
  <div 
    class="resize-handle"
    (mousedown)="handleResizeStart()"
  ></div>
</th>

注意：handleResizeEnd需要绑定到document的mouseup、mouseleave事件上，避免鼠标移出手柄区域后状态没有重置。

可选优化 #

• 给调整大小手柄设置更高的z-index，优先触发调整事件，降低误触概率
• 可以根据当前状态给表格头部添加对应的cursor样式，区分正在执行的操作

内容的提问来源于stack exchange，提问作者oana