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

9
src/renderers/AllDayEventRenderer.ts
View file

@ -13,13 +13,20 @@ export class AllDayEventRenderer {
}
/**
* Get or cache all-day container
* Get or cache all-day container, create if it doesn't exist
*/
private getContainer(): HTMLElement | null {
if (!this.container) {
const header = document.querySelector('swp-calendar-header');
if (header) {
// Try to find existing container
this.container = header.querySelector('swp-allday-container');
// If not found, create it
if (!this.container) {
this.container = document.createElement('swp-allday-container');
header.appendChild(this.container);
}
}
}
return this.container;

26
src/renderers/EventRenderer.ts
View file

@ -94,8 +94,12 @@ export abstract class BaseEventRenderer implements EventRendererStrategy {
protected setupDragEventListeners(): void {
// Handle drag start
eventBus.on('drag:start', (event) => {
const { originalElement, eventId, mouseOffset, column } = (event as CustomEvent).detail;
this.handleDragStart(originalElement, eventId, mouseOffset, column);
const { eventId, mouseOffset, column } = (event as CustomEvent).detail;
// Find element dynamically
const originalElement = document.querySelector(`swp-event[data-event-id="${eventId}"]`) as HTMLElement;
if (originalElement) {
this.handleDragStart(originalElement, eventId, mouseOffset, column);
}
});
// Handle drag move
@ -118,13 +122,25 @@ export abstract class BaseEventRenderer implements EventRendererStrategy {
// Handle drag end
eventBus.on('drag:end', (event) => {
const { eventId, originalElement, finalColumn, finalY } = (event as CustomEvent).detail;
this.handleDragEnd(eventId, originalElement, finalColumn, finalY);
const { eventId, finalColumn, finalY } = (event as CustomEvent).detail;
// Find element dynamically - could be swp-event or swp-allday-event
let originalElement = document.querySelector(`swp-event[data-event-id="${eventId}"]`) as HTMLElement;
if (!originalElement) {
originalElement = document.querySelector(`swp-allday-event[data-event-id="${eventId}"]`) as HTMLElement;
}
if (originalElement) {
this.handleDragEnd(eventId, originalElement, finalColumn, finalY);
}
});
// Handle click (when drag threshold not reached)
eventBus.on('event:click', (event) => {
const { eventId, originalElement } = (event as CustomEvent).detail;
const { eventId } = (event as CustomEvent).detail;
// Find element dynamically
let originalElement = document.querySelector(`swp-event[data-event-id="${eventId}"]`) as HTMLElement;
if (!originalElement) {
originalElement = document.querySelector(`swp-allday-event[data-event-id="${eventId}"]`) as HTMLElement;
}
this.handleEventClick(eventId, originalElement);
});