Improves drag and drop event handling

Refactors drag and drop logic for better event handling and code clarity.

- Moves drag styling to CSS class for cleaner code.
- Emits a 'drag:convert-from-allday' event to handle the conversion of all-day events back to day events.
- Adds logging for debugging purposes.

src/managers/DragDropManager.ts

@@ -107,12 +107,6 @@ export class DragDropManager {
             originalElement: draggedElement,
             headerRenderer
           });
-          
-          // Hide drag clone completely
-          const dragClone = document.querySelector(`swp-event[data-event-id="clone-${this.draggedEventId}"]`);
-          if (dragClone) {
-            (dragClone as HTMLElement).style.display = 'none';
-          }
         }
       }
     });
@@ -131,21 +125,13 @@ export class DragDropManager {
       }
     });
 
-    // Listen for header mouseleave events (remove all-day event, let clone take over)
+    // Listen for header mouseleave events (convert from all-day back to day)
     this.eventBus.on('header:mouseleave', (event) => {
       // Check if we're dragging ANY event
       if (this.draggedEventId) {
-        // Find and remove all-day event specifically in the container
+        this.eventBus.emit('drag:convert-from-allday', {
-        const allDayEvent = document.querySelector(`swp-allday-container swp-allday-event[data-event-id="${this.draggedEventId}"]`);
+          draggedEventId: this.draggedEventId
-        if (allDayEvent) {
+        });
-          allDayEvent.remove();
-        }
-        
-        // Show drag clone again
-        const dragClone = document.querySelector(`swp-event[data-event-id="clone-${this.draggedEventId}"]`);
-        if (dragClone) {
-          (dragClone as HTMLElement).style.display = 'block';
-        }
       }
     });
   }
@@ -288,6 +274,13 @@ export class DragDropManager {
         // Use consolidated position calculation
         const positionData = this.calculateDragPosition(finalPosition);
         
+        console.log('🎯 DragDropManager: Emitting drag:end', {
+          eventId: eventId,
+          finalColumn: positionData.column,
+          finalY: positionData.snappedY,
+          isDragStarted: isDragStarted
+        });
+        
         this.eventBus.emit('drag:end', {
           eventId: eventId,
           finalPosition,

src/renderers/EventRenderer.ts

@@ -123,11 +123,27 @@ export abstract class BaseEventRenderer implements EventRendererStrategy {
     // Handle drag end
     eventBus.on('drag:end', (event) => {
       const { eventId, finalColumn, finalY } = (event as CustomEvent).detail;
+      
+      console.log('🎬 EventRenderer: Received drag:end', {
+        eventId: eventId,
+        finalColumn: finalColumn,
+        finalY: finalY
+      });
+      
       // Find element dynamically - could be swp-event or swp-allday-event
       let originalElement = document.querySelector(`swp-event[data-event-id="${eventId}"]`) as HTMLElement;
+      let elementType = 'day-event';
       if (!originalElement) {
         originalElement = document.querySelector(`swp-allday-event[data-event-id="${eventId}"]`) as HTMLElement;
+        elementType = 'all-day-event';
       }
+      
+      console.log('🔍 EventRenderer: Found element', {
+        elementType: elementType,
+        found: !!originalElement,
+        tagName: originalElement?.tagName
+      });
+      
       if (originalElement) {
         this.handleDragEnd(eventId, originalElement, finalColumn, finalY);
       }
@@ -188,14 +204,7 @@ export abstract class BaseEventRenderer implements EventRendererStrategy {
    * Apply common drag styling to an element
    */
   private applyDragStyling(element: HTMLElement): void {
-    element.style.position = 'absolute';
+    element.classList.add('dragging');
-    element.style.zIndex = '999999';
-    element.style.pointerEvents = 'none';
-    element.style.opacity = '0.8';
-    element.style.left = '2px';
-    element.style.right = '2px';
-    element.style.marginLeft = '0px';
-    element.style.width = '';
   }
 
   /**
@@ -449,9 +458,7 @@ export abstract class BaseEventRenderer implements EventRendererStrategy {
     }
     
     // Fully normalize the clone to be a regular event
-    this.draggedClone.style.pointerEvents = '';
+    this.draggedClone.classList.remove('dragging');
-    this.draggedClone.style.opacity = '';
-    this.draggedClone.style.userSelect = '';
     // Behold z-index hvis det er et stacked event
     
     // Update dataset with new times after successful drop (only for timed events)
@@ -485,6 +492,7 @@ export abstract class BaseEventRenderer implements EventRendererStrategy {
     
     // Clean up any drag artifacts from failed drag attempt
     if (this.draggedClone) {
+      this.draggedClone.classList.remove('dragging');
       this.draggedClone.remove();
       this.draggedClone = null;
     }

wwwroot/css/calendar-events-css.css

@@ -51,6 +51,18 @@ swp-day-columns swp-event {
     color: var(--color-text);
   }
   
+  /* Dragging state */
+  &.dragging {
+    position: absolute;
+    z-index: 999999;
+    pointer-events: none;
+    opacity: 0.8;
+    left: 2px;
+    right: 2px;
+    margin-left: 0px;
+    width: auto;
+  }
+  
 }
 
 swp-day-columns swp-event:hover {