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

Improves drag and drop functionality and fixes issues

Browse source 
Refactors drag and drop logic to dynamically find the dragged element, ensuring correct behavior even when the DOM changes during the drag operation.

Creates all-day container if it doesn't exist.

This resolves issues where drag and drop operations would fail if the original element was no longer present in the DOM or if the container didn't exist.
This commit is contained in:
Janus Knudsen 2025-09-13 20:47:42 +02:00
parent 7054c0d40a
commit 9cdf4fbe96
4 changed files with 58 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

29
src/managers/DragDropManager.ts
View file

@ -97,12 +97,17 @@ export class DragDropManager {
const { targetDate, headerRenderer } = (event as CustomEvent).detail;
if (this.draggedEventId && targetDate) {
// Emit event to convert to all-day
this.eventBus.emit('drag:convert-to-allday', {
targetDate,
originalElement: this.originalElement,
headerRenderer
});
// Find dragget element dynamisk
const draggedElement = document.querySelector(`swp-event[data-event-id="${this.draggedEventId}"]`);
if (draggedElement) {
// Element findes stadig som day-event, så konverter
this.eventBus.emit('drag:convert-to-allday', {
targetDate,
originalElement: draggedElement,
headerRenderer
});
}
}
});
@ -126,8 +131,7 @@ export class DragDropManager {
if (this.draggedEventId && this.isAllDayEventBeingDragged()) {
// Convert all-day event to timed event using SwpEventElement factory
this.eventBus.emit('drag:convert-allday-to-timed', {
eventId: this.draggedEventId,
originalElement: this.originalElement
eventId: this.draggedEventId
});
}
});
@ -197,7 +201,6 @@ export class DragDropManager {
// Start drag - emit drag:start event
this.isDragStarted = true;
this.eventBus.emit('drag:start', {
originalElement: this.originalElement,
eventId: this.draggedEventId,
mousePosition: this.initialMousePosition,
mouseOffset: this.mouseOffset,
@ -274,7 +277,6 @@ export class DragDropManager {
this.eventBus.emit('drag:end', {
eventId: eventId,
originalElement: originalElement,
finalPosition,
finalColumn: positionData.column,
finalY: positionData.snappedY
@ -283,7 +285,6 @@ export class DragDropManager {
// This was just a click - emit click event instead
this.eventBus.emit('event:click', {
eventId: eventId,
originalElement: originalElement,
mousePosition: { x: event.clientX, y: event.clientY }
});
}
@ -491,8 +492,10 @@ export class DragDropManager {
* Check if an all-day event is currently being dragged
*/
private isAllDayEventBeingDragged(): boolean {
if (!this.originalElement) return false;
return this.originalElement.dataset.displayType === 'allday';
if (!this.draggedEventId) return false;
// Check if element exists as all-day event
const allDayElement = document.querySelector(`swp-allday-event[data-event-id="${this.draggedEventId}"]`);
return allDayElement !== null;
}
/**