父组件dndDraggable阻断AG-Grid原生行拖拽问题求助

问题背景 #

在Angular应用中，将AG-Grid嵌入audit-questions-grid组件，同时使用ngx-drag-drop实现sections之间的拖拽功能。但启用外部容器的ngx-drag-drop后，AG-Grid的原生行拖拽功能失效，无法正常进行网格内行排序及行拖拽到其他section的操作。

需求目标 #

• 保留AG-Grid原生拖拽能力，实现网格内行重新排序；
• 支持将AG-Grid中的行拖拽到其他section；
• 继续使用ngx-drag-drop管理AG-Grid组件外的sections间拖拽。

核心原因 #

ngx-drag-drop的拖拽事件会向上冒泡，捕获了AG-Grid行拖拽触发的dragstart等事件，导致AG-Grid原生拖拽逻辑无法执行。

解决方案与代码修改 #

方案1：限制ngx-drag-drop触发区域 #

将ngx-drag-drop的拖拽触发范围仅限定在section的标题栏，避免覆盖AG-Grid所在区域。

父组件代码修改：

<div class="section" *ngFor="let section of sections">
  <!-- 仅在标题栏绑定ngx-drag-drop拖拽逻辑 -->
  <div [dndDraggable]="section" (dndMoved)="onDragged(section)">
    <h3>{{section.name}}</h3>
  </div>

  <div class="collapse mb-3" [ngbCollapse]="isCollapsed(section)">
    <app-grid-component 
      [section]="section" 
      [questions]="getQuestions(section)" 
      [isPending]="editingAuditQuestions"
      (dragStart)="onQuestionDragStart(section)" 
      (dragDrop)="onQuestionDragDrop(section, $event)"
      (openEditQuestionModal)="onOpenEditQuestionModal($event)" 
      (removeQuestion)="onRemoveQuestion($event)">
    </app-grid-component>
  </div>
</div>

方案2：阻止AG-Grid行拖拽事件冒泡 #

在AG-Grid的行拖拽开始事件中，阻止事件向上冒泡，避免被ngx-drag-drop容器捕获。

app-grid-component代码修改：

1. 配置行拖拽列并绑定rowDragStart事件：

<div class="drop" (dragstart)="onDragStart($event)" (dragover)="onDragOver($event)" (drop)="onDragDrop($event)">
  <ag-grid-angular 
    class="w-100" 
    domLayout="autoHeight" 
    [rowData]="questions" 
    [defaultColDef]="defaultColDef"
    [columnDefs]="columns" 
    [rowDragManaged]="true" 
    [suppressRowDrag]="false" 
    [suppressRowClickSelection]="true" 
    [suppressCellFocus]="true"
    [suppressMovableColumns]="true" 
    [suppressContextMenu]="true" 
    [overlayLoadingTemplate]="overlayLoadingTemplate" 
    (gridReady)="onGridReady($event)" 
    (gridSizeChanged)="onGridSizeChanged($event)" 
    (cellClicked)="onCellClicked($event)"
    (rowDragStart)="onRowDragStart($event)"> <!-- 绑定行拖拽开始事件 -->
  </ag-grid-angular>
</div>

2. 组件类中添加事件处理逻辑：

// 定义行拖拽列
columns = [
  { field: 'drag', rowDrag: true, width: 50 },
  // 其他列定义...
];

// 阻止行拖拽事件冒泡
onRowDragStart(event: any) {
  event.event.stopPropagation();
}

方案3：动态禁用AG-Grid区域的ngx-drag-drop #

通过鼠标进入/离开AG-Grid区域，动态禁用ngx-drag-drop的拖拽功能。

父组件代码修改：

<div class="section" *ngFor="let section of sections" [dndDisableIf]="isOverGrid">
  <div [dndDraggable]="section" (dndMoved)="onDragged(section)">
    <h3>{{section.name}}</h3>
  </div>

  <div class="collapse mb-3" [ngbCollapse]="isCollapsed(section)">
    <app-grid-component 
      [section]="section" 
      [questions]="getQuestions(section)" 
      [isPending]="editingAuditQuestions"
      (dragStart)="onQuestionDragStart(section)" 
      (dragDrop)="onQuestionDragDrop(section, $event)"
      (openEditQuestionModal)="onOpenEditQuestionModal($event)" 
      (removeQuestion)="onRemoveQuestion($event)"
      (mouseenter)="isOverGrid = true" 
      (mouseleave)="isOverGrid = false">
    </app-grid-component>
  </div>
</div>

父组件类添加变量：

isOverGrid = false;

行拖拽到其他section的补充处理 #

要实现AG-Grid行拖拽到其他section，需在目标section的drop区域绑定drop事件，处理数据转移逻辑：

1. 在目标section容器添加(drop)="onDropQuestion($event, section)"和(dragover)="onDragOver($event)"；
2. 在事件处理中获取拖拽的行数据，更新对应section的questions列表，并移除原section中的该行数据。

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