Janus007/Calendar
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improves drag and drop for timed and all-day events

Browse source 
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.
This commit is contained in:
Janus C. H. Knudsen 2025-09-26 22:53:49 +02:00
parent 0553089085
commit 9dfd4574d8
5 changed files with 62 additions and 45 deletions
Download patch file Download diff file Expand all files Collapse all files

17
src/renderers/EventRendererManager.ts
View file

@ -179,11 +179,10 @@ export class EventRenderingService {
private setupDragEventListeners(): void {
// Handle drag start
this.eventBus.on('drag:start', (event: Event) => {
const { draggedElement, mouseOffset, column } = (event as CustomEvent<DragStartEventPayload>).detail;
const dragStartPayload = (event as CustomEvent<DragStartEventPayload>).detail;
// Use the draggedElement directly - no need for DOM query
if (draggedElement && this.strategy.handleDragStart && column) {
const eventId = draggedElement.dataset.eventId || '';
this.strategy.handleDragStart(draggedElement, eventId, mouseOffset, column);
if (dragStartPayload.draggedElement && this.strategy.handleDragStart && dragStartPayload.column) {
this.strategy.handleDragStart(dragStartPayload);
}
});
@ -246,10 +245,16 @@ export class EventRenderingService {
// Handle column change
this.eventBus.on('drag:column-change', (event: Event) => {
const { draggedElement, newColumn } = (event as CustomEvent<DragColumnChangeEventPayload>).detail;
const { draggedElement, draggedClone, newColumn } = (event as CustomEvent<DragColumnChangeEventPayload>).detail;
// Filter: Only handle events where clone is NOT an all-day event (normal timed events)
if (draggedClone && draggedClone.hasAttribute('data-allday')) {
return; // This is an all-day event, let AllDayManager handle it
}
if (this.strategy.handleColumnChange) {
const eventId = draggedElement.dataset.eventId || '';
this.strategy.handleColumnChange(eventId, newColumn);
this.strategy.handleColumnChange(eventId, newColumn); //TODO: Should be refactored to use payload, no need to lookup clone again inside
}
});