Conflict Between AG-Grid Drag-and-Drop and ngx-drag-drop in Angular App

I'm working on an Angular app where I'm using AG-Grid inside a component (audit-questions-grid), and I also have ngx-drag-drop enabled on other elements in the layout (e.g., sections). However, I’m encountering an issue where AG-Grid’s native drag-and-drop functionality (specifically, row dragging) is not working when ngx-drag-drop is active on the outer container.

What I’m Trying to Do: I want to use AG-Grid's drag-and-drop functionality to reorder rows within the grid. ag-grid's row can be moved to other section too. I also want to use ngx-drag-drop to manage drag-and-drop between different sections outside the AG-Grid component.

<div class="section" *ngFor="let section of sections">
<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>


this is my app-grid-component

<div class="drop" (dragstart)="onDragStart()" (dragover)="onDragOver($event)" (drop)="onDragDrop($event)">
<ag-grid-angular class="ag-theme-pym w-100" domLayout="autoHeight" [rowData]="questions" [defaultColDef]="defaultColDef" rowClass="on-hover-toggle"
[columnDefs]="columns" [animateRows]="false" [rowDragManaged]="true" [suppressRowDrag]="false" [suppressRowClickSelection]="true" [suppressCellFocus]="true"
[suppressMovableColumns]="true" [suppressContextMenu]="true" [overlayLoadingTemplate]="overlayLoadingTemplate" (gridReady)="onGridReady($event)"
(gridSizeChanged)="onGridSizeChanged($event)" (cellClicked)="onCellClicked($event)">
</ag-grid-angular>
</div>

Continue reading...