Refactors event drag-drop and cloning logic

Centralizes drag event listener setup in `EventRendererManager` for better separation of concerns.

Introduces factory and cloning methods in `SwpEventElement` to simplify event cloning and data extraction from DOM elements during drag operations.

Enhances `DragDropManager` to pass the actual dragged element for conversion and accurately detect the drop target (day column or header).

Updates `EventRenderer` to expose drag-handling methods publicly, allowing the `EventRendererManager` to delegate event-specific drag operations based on drop target.

src/managers/AllDayManager.ts

@@ -74,14 +74,26 @@ export class AllDayManager {
     });
 
     eventBus.on('drag:end', (event) => {
-      const { eventId, finalPosition } = (event as CustomEvent).detail;
+
+      const { eventId, finalColumn, finalY, dropTarget } = (event as CustomEvent).detail;
+
+      if (dropTarget != 'SWP-DAY-HEADER')//we are not inside the swp-day-header, so just ignore.
+        return;
+
+      console.log('🎬 AllDayManager: Received drag:end', {
+        eventId: eventId,
+        finalColumn: finalColumn,
+        finalY: finalY
+      });
 
       // Check if this was an all-day event
       const originalElement = document.querySelector(`swp-allday-container swp-allday-event[data-event-id="${eventId}"]`);
       const dragClone = document.querySelector(`swp-allday-container swp-allday-event[data-event-id="clone-${eventId}"]`);
 
+
+
       console.log('🎯 AllDayManager: Ending drag for all-day event', { eventId });
-      this.handleDragEnd(originalElement as HTMLElement, dragClone as HTMLElement, finalPosition);
+      this.handleDragEnd(originalElement as HTMLElement, dragClone as HTMLElement, finalColumn);
     });
   }
 

src/managers/DragDropManager.ts

@@ -172,8 +172,11 @@ export class DragDropManager {
         const mousePosition = { x: this.lastMousePosition.x, y: this.lastMousePosition.y };
         const column = this.getColumnDateFromX(mousePosition.x);
         
+        // Find the actual dragged element
+        const draggedElement = document.querySelector(`[data-event-id="${this.draggedEventId}"]`) as HTMLElement;
+        
         this.eventBus.emit('drag:convert-to-time_event', {
-          draggedEventId: this.draggedEventId,
+          draggedElement: draggedElement,
           mousePosition: mousePosition,
           column: column
         });
@@ -319,10 +322,14 @@ export class DragDropManager {
         // Use consolidated position calculation
         const positionData = this.calculateDragPosition(finalPosition);
         
+        // Detect drop target (swp-day-column or swp-day-header)
+        const dropTarget = this.detectDropTarget(finalPosition);
+        
         console.log('🎯 DragDropManager: Emitting drag:end', {
           eventId: eventId,
           finalColumn: positionData.column,
           finalY: positionData.snappedY,
+          dropTarget: dropTarget,
           isDragStarted: isDragStarted
         });
         
@@ -330,7 +337,8 @@ export class DragDropManager {
           eventId: eventId,
           finalPosition,
           finalColumn: positionData.column,
-          finalY: positionData.snappedY
+          finalY: positionData.snappedY,
+          target: dropTarget
         });
       } else {
         // This was just a click - emit click event instead
@@ -411,9 +419,6 @@ export class DragDropManager {
     // Sorter efter x-position (fra venstre til højre)
     this.columnBoundsCache.sort((a, b) => a.left - b.left);
     
-    console.log('📏 DragDropManager: Updated column bounds cache', {
-      columns: this.columnBoundsCache.length
-    });
   }
 
   /**
@@ -592,6 +597,28 @@ export class DragDropManager {
     return allDayElement !== null;
   }
 
+  /**
+   * Detect drop target - whether dropped in swp-day-column or swp-day-header
+   */
+  private detectDropTarget(position: Position): 'swp-day-column' | 'swp-day-header' | null {
+    const elementAtPosition = document.elementFromPoint(position.x, position.y);
+    if (!elementAtPosition) return null;
+
+    // Traverse up the DOM tree to find the target container
+    let currentElement = elementAtPosition as HTMLElement;
+    while (currentElement && currentElement !== document.body) {
+      if (currentElement.tagName === 'SWP-DAY-HEADER') {
+        return 'swp-day-header';
+      }
+      if (currentElement.tagName === 'SWP-DAY-COLUMN') {
+        return 'swp-day-column';
+      }
+      currentElement = currentElement.parentElement as HTMLElement;
+    }
+
+    return null;
+  }
+
   /**
    * Clean up all resources and event listeners
    */

src/managers/HeaderManager.ts

@@ -44,22 +44,15 @@ export class HeaderManager {
    * Setup header drag event listeners - REFACTORED to use mouseenter
    */
   public setupHeaderDragListeners(): void {
-    const calendarHeader = this.getCalendarHeader();
-    if (!calendarHeader) return;
+    if (!this.getCalendarHeader()) return;
 
     console.log('🎯 HeaderManager: Setting up drag listeners with mouseenter');
 
-    // Track last processed date to avoid duplicates
-    let lastProcessedDate: string | null = null;
-    let lastProcessedTime = 0;
 
     // Use mouseenter instead of mouseover to avoid continuous firing
     this.headerEventListener = (event: Event) => {
-      // OPTIMIZED: Check for active drag operation FIRST before doing any other work
-      const isDragActive = document.querySelector('.dragging') !== null;
       
-      if (!isDragActive) {
-        // Ingen drag operation, spring resten af funktionen over
+      if (!document.querySelector('.dragging') !== null) {
         return;
       }
       
@@ -114,9 +107,8 @@ export class HeaderManager {
       });
     };
 
-    // Use mouseenter with capture to catch events early
-    calendarHeader.addEventListener('mouseenter', this.headerEventListener, true);
-    calendarHeader.addEventListener('mouseleave', this.headerMouseLeaveListener);
+    this.getCalendarHeader()?.addEventListener('mouseenter', this.headerEventListener, true);
+    this.getCalendarHeader()?.addEventListener('mouseleave', this.headerMouseLeaveListener);
     
     console.log('✅ HeaderManager: Event listeners attached (mouseenter + mouseleave)');
   }