Adding debug information to figure why drag & drop is not working.

Author: renemadsen

eform-client/src/app/common/services/navigation-menu/navigation-menu-drag-drop.service.ts

@@ -5,7 +5,7 @@ import { CdkDropList, CdkDragMove, CdkDragRelease, CdkDrag } from '@angular/cdk/
 /**
  * Service to handle nested drag and drop operations in navigation menu.
  * Based on: https://stackoverflow.com/a/67337935/2144807
- * 
+ *
  * This service dynamically tracks which drop list is currently being hovered
  * during drag operations, enabling nested drag and drop functionality that
  * cdkDropListGroup doesn't support out of the box.
@@ -29,24 +29,25 @@ export class NavigationMenuDragDropService {
    */
   dragMoved(event: CdkDragMove<any>) {
     const elementFromPoint = this.document.elementFromPoint(
-      event.pointerPosition.x, 
+      event.pointerPosition.x,
       event.pointerPosition.y
     );
-    
+
     if (!elementFromPoint) {
       this.currentHoverDropListId = undefined;
       return;
     }
-    
+
     const dropList = elementFromPoint.classList.contains('cdk-drop-list')
       ? elementFromPoint
       : elementFromPoint.closest('.cdk-drop-list');
-    
+
     if (!dropList) {
       this.currentHoverDropListId = undefined;
       return;
     }
-    
+
+    console.log('Hovering over drop list:', dropList.id);
     this.currentHoverDropListId = dropList.id;
   }
 

eform-client/src/app/modules/advanced/modules/navigation-menu/components/navigation-menu-page/navigation-menu-page.component.html

@@ -19,7 +19,7 @@
   </div>
 </eform-new-subheader>
 
-<div class="d-flex flex-row align-items-start" cdkDropListGroup>
+<div class="d-flex flex-row align-items-start">
   <mat-accordion multi="true" displayMode="flat" class="mr-2">
     <mat-expansion-panel *ngFor="
           let menuTemplate of navigationMenuModel.menuTemplates;
@@ -66,8 +66,7 @@
       [cdkDropListData]="navigationMenuModel.actualMenu"
       [cdkDropListConnectedTo]="connectedLists"
       [cdkDropListEnterPredicate]="allowDropPredicate"
-      (cdkDropListDropped)="dropMenuItem($event)"
-      class="dragula-item">
+      (cdkDropListDropped)="dropMenuItem($event)">
       <mat-expansion-panel *ngFor="
               let menuItem of navigationMenuModel.actualMenu;
               let firstLevelIndex = index"
@@ -102,7 +101,6 @@
           </mat-panel-title>
         </mat-expansion-panel-header>
         <div
-          class="dropdownBody"
           cdkDropList
           [id]="getDropdownId(firstLevelIndex)"
           [cdkDropListData]="menuItem.children"