Improves event drag and drop highlighting

Enhances the visual feedback during and after event drag and drop operations in the calendar.

- Preserves the full opacity of the dragged event clone during the drag operation for better visibility.
- Applies a highlight class to the event after it's dropped to visually indicate the new location.
- Adds specific styling for the highlighted state based on event type.

src/elements/SwpEventElement.ts

@@ -354,6 +354,9 @@ export class SwpAllDayEventElement extends BaseSwpEventElement {
     // Disable pointer events on clone so it doesn't interfere with hover detection
     clone.style.pointerEvents = 'none';
 
+    // Preserve full opacity during drag
+    clone.style.opacity = '1';
+
     return clone;
   }
 

src/managers/AllDayManager.ts

@@ -490,6 +490,9 @@ export class AllDayManager {
     dragEndEvent.draggedClone.style.cursor = '';
     dragEndEvent.draggedClone.style.opacity = '';
 
+    // 7. Apply highlight class to show the dropped event with highlight color
+    dragEndEvent.draggedClone.classList.add('highlight');
+
     this.fadeOutAndRemove(dragEndEvent.originalElement);
 
     this.checkAndAnimateAllDayHeight();

src/renderers/AllDayEventRenderer.ts

@@ -79,6 +79,9 @@ export class AllDayEventRenderer {
     const dayEvent = SwpAllDayEventElement.fromCalendarEvent(event);
     dayEvent.applyGridPositioning(layout.row, layout.startColumn, layout.endColumn);
 
+    // Apply highlight class to show events with highlight color
+    dayEvent.classList.add('highlight');
+
     container.appendChild(dayEvent);
   }