Improves drag and drop functionality

Refactors drag and drop logic to use the dragged clone consistently, fixing issues with event handling and element manipulation during drag operations.
Also includes a fix where the original element is removed after a drag is completed.
Adds column bounds cache update after drag operations for improved column detection.

src/managers/AllDayManager.ts

@@ -74,7 +74,7 @@ export class AllDayManager {
     });
 
     eventBus.on('drag:column-change', (event) => {
-      const { draggedElement, draggedClone, mousePosition } = (event as CustomEvent<DragColumnChangeEventPayload>).detail;
+      const { originalElement: draggedElement, draggedClone, mousePosition } = (event as CustomEvent<DragColumnChangeEventPayload>).detail;
 
       if (draggedClone == null)
         return;
@@ -316,8 +316,13 @@ export class AllDayManager {
    * During drag: Place in row 1 only, calculate column from targetDate
    */
   private handleConvertToAllDay(payload: DragMouseEnterHeaderEventPayload): void {
+
+    if(payload.draggedClone?.dataset == null)
+      console.error("payload.cloneElement.dataset.eventId is null");
+
+
     console.log('🔄 AllDayManager: Converting to all-day (row 1 only during drag)', {
-      eventId: payload.cloneElement.dataset.eventId,
+      eventId: payload.draggedClone.dataset.eventId,
       targetDate: payload.targetColumn
     });
 
@@ -325,17 +330,18 @@ export class AllDayManager {
     let allDayContainer = this.getAllDayContainer();
 
 
-    payload.cloneElement.removeAttribute('style');
-    payload.cloneElement.classList.add('all-day-style');
-    payload.cloneElement.style.gridRow = '1';
-    payload.cloneElement.style.gridColumn = payload.targetColumn.index.toString();
-    payload.cloneElement.dataset.allday = 'true'; // Set the all-day attribute for filtering
+    payload.draggedClone.removeAttribute('style');
+    payload.draggedClone.style.gridRow = '1';
+    payload.draggedClone.style.gridColumn = payload.targetColumn.index.toString();
+    payload.draggedClone.dataset.allday = 'true'; // Set the all-day attribute for filtering
 
     // Add to container
-    allDayContainer?.appendChild(payload.cloneElement);
+    allDayContainer?.appendChild(payload.draggedClone);
+    
+    ColumnDetectionUtils.updateColumnBoundsCache();
 
     console.log('✅ AllDayManager: Converted to all-day style (simple row 1)', {
-      eventId: payload.cloneElement.dataset.eventId,
+      eventId: payload.draggedClone.dataset.eventId,
       gridColumn: payload.targetColumn,
       gridRow: 1
     });
@@ -459,7 +465,7 @@ export class AllDayManager {
 
       if (oldGridArea !== newGridArea) {
         changedCount++;
-        const element = document.querySelector(`[data-event-id="${layout.calenderEvent.id}"]`) as HTMLElement;
+        const element = dragEndEvent.draggedClone; //:end document.querySelector(`[data-event-id="${layout.calenderEvent.id}"]`) as HTMLElement;
         if (element) {
 
           // Add transition class for smooth animation
@@ -481,6 +487,7 @@ export class AllDayManager {
     dragEndEvent.draggedClone.style.opacity = '';
 
     // 7. Restore original element opacity
+    dragEndEvent.originalElement.remove();
     //originalElement.style.opacity = '';
 
     // 8. Check if height adjustment is needed

src/managers/DragDropManager.ts

@@ -129,7 +129,7 @@ export class DragDropManager {
 
     // Clean up drag state first
     this.cleanupDragState();
-
+    ColumnDetectionUtils.updateColumnBoundsCache();
     this.lastMousePosition = { x: event.clientX, y: event.clientY };
     this.lastLoggedPosition = { x: event.clientX, y: event.clientY };
     this.initialMousePosition = { x: event.clientX, y: event.clientY };
@@ -171,16 +171,18 @@ export class DragDropManager {
     this.currentMouseY = event.clientY;
     this.lastMousePosition = { x: event.clientX, y: event.clientY };
 
-    // Check for header enter/leave during drag
-    if (this.draggedElement) {
-      this.checkHeaderEnterLeave(event);
-    }
 
-    if (event.buttons === 1 && this.draggedElement) {
+
+    if (event.buttons === 1) {
       const currentPosition: MousePosition = { x: event.clientX, y: event.clientY }; //TODO: Is this really needed? why not just use event.clientX + Y directly
 
+      // Check for header enter/leave during drag
+      if (this.draggedClone) {
+        this.checkHeaderEnterLeave(event);
+      }
+
       // Check if we need to start drag (movement threshold)
-      if (!this.isDragStarted) {
+      if (!this.isDragStarted && this.draggedElement) {
         const deltaX = Math.abs(currentPosition.x - this.initialMousePosition.x);
         const deltaY = Math.abs(currentPosition.y - this.initialMousePosition.y);
         const totalMovement = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
@@ -214,7 +216,7 @@ export class DragDropManager {
       }
 
       // Continue with normal drag behavior only if drag has started
-      if (this.isDragStarted) {
+      if (this.isDragStarted && this.draggedElement && this.draggedClone) {
         const deltaY = Math.abs(currentPosition.y - this.lastLoggedPosition.y);
 
         // Check for snap interval vertical movement (normal drag behavior)
@@ -227,6 +229,7 @@ export class DragDropManager {
           // Emit drag move event with snapped position (normal behavior)
           const dragMovePayload: DragMoveEventPayload = {
             draggedElement: this.draggedElement,
+            draggedClone: this.draggedClone,
             mousePosition: currentPosition,
             snappedY: positionData.snappedY,
             columnBounds: positionData.column,
@@ -246,7 +249,7 @@ export class DragDropManager {
           this.currentColumnBounds = newColumn;
 
           const dragColumnChangePayload: DragColumnChangeEventPayload = {
-            draggedElement: this.draggedElement,
+            originalElement: this.draggedElement,
             draggedClone: this.draggedClone,
             previousColumn,
             newColumn,
@@ -276,6 +279,9 @@ export class DragDropManager {
         // Detect drop target (swp-day-column or swp-day-header)
         const dropTarget = this.detectDropTarget(mousePosition);
 
+        if(!dropTarget)
+          throw "dropTarget is null";
+
         console.log('🎯 DragDropManager: Emitting drag:end', {
           draggedElement: this.draggedElement.dataset.eventId,
           finalColumn: positionData.column,
@@ -285,15 +291,14 @@ export class DragDropManager {
         });
 
         const dragEndPayload: DragEndEventPayload = {
-          draggedElement: this.draggedElement,
+          originalElement: this.draggedElement,
           draggedClone: this.draggedClone,
           mousePosition,
           finalPosition: positionData,
           target: dropTarget
         };
         this.eventBus.emit('drag:end', dragEndPayload);
-        
-        this.draggedElement.remove(); // TODO: this should be changed into a subscriber which only after a succesful placement is fired, not just mouseup as this can remove elements that are not placed.
+
 
       } else {
         // This was just a click - emit click event instead
@@ -489,7 +494,7 @@ export class DragDropManager {
     const isCurrentlyInHeader = !!headerElement;
 
     // Detect header enter
-    if (!this.isInHeader && isCurrentlyInHeader) {
+    if (!this.isInHeader && isCurrentlyInHeader && this.draggedClone) {
       this.isInHeader = true;
 
       // Calculate target date using existing method
@@ -498,15 +503,11 @@ export class DragDropManager {
       if (targetColumn) {
         console.log('🎯 DragDropManager: Emitting drag:mouseenter-header', { targetDate: targetColumn });
 
-        // Find clone element (if it exists)
-        const eventId = this.draggedElement?.dataset.eventId;
-        const cloneElement = document.querySelector(`[data-event-id="clone-${eventId}"]`) as HTMLElement;
-
         const dragMouseEnterPayload: DragMouseEnterHeaderEventPayload = {
           targetColumn: targetColumn,
           mousePosition: { x: event.clientX, y: event.clientY },
           originalElement: this.draggedElement,
-          cloneElement: cloneElement
+          draggedClone: this.draggedClone
         };
         this.eventBus.emit('drag:mouseenter-header', dragMouseEnterPayload);
       }
@@ -525,15 +526,12 @@ export class DragDropManager {
         return;
 
       }
-      // Find clone element (if it exists)
-      const eventId = this.draggedElement?.dataset.eventId;
-      const cloneElement = document.querySelector(`[data-event-id="clone-${eventId}"]`) as HTMLElement;
 
       const dragMouseLeavePayload: DragMouseLeaveHeaderEventPayload = {
         targetDate: targetColumn.date,
         mousePosition: { x: event.clientX, y: event.clientY },
         originalElement: this.draggedElement,
-        cloneElement: cloneElement
+        draggedClone: this.draggedClone
       };
       this.eventBus.emit('drag:mouseleave-header', dragMouseLeavePayload);
     }

src/managers/HeaderManager.ts

@@ -48,7 +48,7 @@ export class HeaderManager {
 
     // Create and store event listeners
     this.dragMouseEnterHeaderListener = (event: Event) => {
-      const { targetColumn: targetDate, mousePosition, originalElement, cloneElement } = (event as CustomEvent<DragMouseEnterHeaderEventPayload>).detail;
+      const { targetColumn: targetDate, mousePosition, originalElement, draggedClone: cloneElement } = (event as CustomEvent<DragMouseEnterHeaderEventPayload>).detail;
       
       console.log('🎯 HeaderManager: Received drag:mouseenter-header', {
         targetDate,
@@ -65,7 +65,7 @@ export class HeaderManager {
     };
 
     this.dragMouseLeaveHeaderListener = (event: Event) => {
-      const { targetDate, mousePosition, originalElement, cloneElement } = (event as CustomEvent<DragMouseLeaveHeaderEventPayload>).detail;
+      const { targetDate, mousePosition, originalElement, draggedClone: cloneElement } = (event as CustomEvent<DragMouseLeaveHeaderEventPayload>).detail;
       
       console.log('🚪 HeaderManager: Received drag:mouseleave-header', {
         targetDate,