Adds drag column change event handling

Introduces support for moving events between columns during drag
Tracks column changes and updates event positioning dynamically
Enables smooth cross-column event dragging experience

src/v2/managers/DragDropManager.ts

@@ -7,7 +7,8 @@ import {
   IDragStartPayload,
   IDragMovePayload,
   IDragEndPayload,
-  IDragCancelPayload
+  IDragCancelPayload,
+  IDragColumnChangePayload
 } from '../types/DragTypes';
 
 interface DragState {
@@ -17,6 +18,7 @@ interface DragState {
   startY: number;
   mouseOffset: IMousePosition;
   columnElement: HTMLElement;
+  currentColumn: HTMLElement;
   targetY: number;
   currentY: number;
   animationId: number;
@@ -36,6 +38,7 @@ export class DragDropManager {
   private mouseDownPosition: IMousePosition | null = null;
   private pendingElement: HTMLElement | null = null;
   private pendingMouseOffset: IMousePosition | null = null;
+  private container: HTMLElement | null = null;
 
   private readonly DRAG_THRESHOLD = 5;
   private readonly INTERPOLATION_FACTOR = 0.3;
@@ -49,6 +52,7 @@ export class DragDropManager {
    * Initialize drag-drop on a container element
    */
   init(container: HTMLElement): void {
+    this.container = container;
     container.addEventListener('pointerdown', this.handlePointerDown);
     document.addEventListener('pointermove', this.handlePointerMove);
     document.addEventListener('pointerup', this.handlePointerUp);
@@ -169,6 +173,7 @@ export class DragDropManager {
       startY,
       mouseOffset,
       columnElement,
+      currentColumn: columnElement,
       targetY: Math.max(0, targetY),
       currentY: startY,
       animationId: 0
@@ -193,6 +198,22 @@ export class DragDropManager {
   private updateDragTarget(e: PointerEvent): void {
     if (!this.dragState) return;
 
+    // Check for column change
+    const columnAtPoint = this.getColumnAtPoint(e.clientX);
+    if (columnAtPoint && columnAtPoint !== this.dragState.currentColumn) {
+      const payload: IDragColumnChangePayload = {
+        eventId: this.dragState.eventId,
+        element: this.dragState.element,
+        previousColumn: this.dragState.currentColumn,
+        newColumn: columnAtPoint,
+        currentY: this.dragState.currentY
+      };
+
+      this.eventBus.emit(CoreEvents.EVENT_DRAG_COLUMN_CHANGE, payload);
+      this.dragState.currentColumn = columnAtPoint;
+      this.dragState.columnElement = columnAtPoint;
+    }
+
     const columnRect = this.dragState.columnElement.getBoundingClientRect();
     const targetY = e.clientY - columnRect.top - this.dragState.mouseOffset.y;
 
@@ -204,6 +225,22 @@ export class DragDropManager {
     }
   }
 
+  /**
+   * Find column element at given X coordinate
+   */
+  private getColumnAtPoint(clientX: number): HTMLElement | null {
+    if (!this.container) return null;
+
+    const columns = this.container.querySelectorAll('swp-day-column');
+    for (const col of columns) {
+      const rect = col.getBoundingClientRect();
+      if (clientX >= rect.left && clientX <= rect.right) {
+        return col as HTMLElement;
+      }
+    }
+    return null;
+  }
+
   private animateDrag = (): void => {
     if (!this.dragState) return;