Improves drag and drop for timed and all-day events

Refactors drag and drop handling to use a cloned event element,
ensuring correct positioning and styling during drag operations
for both regular timed events and all-day events.

This change streamlines the drag and drop process by:
- Creating a clone of the dragged event at the start of the drag.
- Passing the clone through the drag events.
- Handling all-day events with the AllDayManager
- Handling regular timed events with the EventRendererManager

This resolves issues with event positioning and styling during
drag, especially when moving events across columns or between
all-day and timed sections.

src/managers/DragDropManager.ts

@@ -7,6 +7,7 @@ import { IEventBus } from '../types/CalendarTypes';
 import { calendarConfig } from '../core/CalendarConfig';
 import { PositionUtils } from '../utils/PositionUtils';
 import { ColumnDetectionUtils } from '../utils/ColumnDetectionUtils';
+import { SwpEventElement } from '../elements/SwpEventElement';
 import {
   DragStartEventPayload,
   DragMoveEventPayload,
@@ -40,6 +41,7 @@ export class DragDropManager {
 
   // Drag state
   private draggedElement!: HTMLElement | null;
+  private draggedClone!: HTMLElement | null;
   private currentColumn: string | null = null;
   private isDragStarted = false;
 
@@ -198,8 +200,17 @@ export class DragDropManager {
           // Start drag - emit drag:start event
           this.isDragStarted = true;
 
+           // Create SwpEventElement from existing DOM element and clone it
+              const originalSwpEvent = SwpEventElement.fromExistingElement(this.draggedElement);
+              const clonedSwpEvent = originalSwpEvent.createClone();
+          
+              // Get the cloned DOM element
+              this.draggedClone = clonedSwpEvent.getElement();
+
+              
           const dragStartPayload: DragStartEventPayload = {
             draggedElement: this.draggedElement,
+            draggedClone: this.draggedClone,
             mousePosition: this.initialMousePosition,
             mouseOffset: this.mouseOffset,
             column: this.currentColumn
@@ -244,6 +255,7 @@ export class DragDropManager {
 
           const dragColumnChangePayload: DragColumnChangeEventPayload = {
             draggedElement: this.draggedElement,
+            draggedClone: this.draggedClone,
             previousColumn,
             newColumn,
             mousePosition: currentPosition
@@ -514,6 +526,7 @@ export class DragDropManager {
    */
   private cleanupDragState(): void {
     this.draggedElement = null;
+    this.draggedClone = null;
     this.currentColumn = null;
     this.isDragStarted = false;
     this.isInHeader = false;