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

Improves drag and drop functionality

Browse source 
Refactors drag and drop logic to use the dragged clone consistently, fixing issues with event handling and element manipulation during drag operations.
Also includes a fix where the original element is removed after a drag is completed.
Adds column bounds cache update after drag operations for improved column detection.
This commit is contained in:
Janus C. H. Knudsen 2025-09-30 00:13:52 +02:00
parent 83e01f9cb7
commit 5417a2b6b1
7 changed files with 50 additions and 45 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/renderers/EventRendererManager.ts
View file

@ -210,7 +210,7 @@ export class EventRenderingService {
// Handle drag end events and delegate to appropriate renderer
this.eventBus.on('drag:end', (event: Event) => {
const { draggedElement, finalPosition, target } = (event as CustomEvent<DragEndEventPayload>).detail;
const { originalElement: draggedElement, finalPosition, target } = (event as CustomEvent<DragEndEventPayload>).detail;
const finalColumn = finalPosition.column;
const finalY = finalPosition.snappedY;
const eventId = draggedElement.dataset.eventId || '';
@ -252,14 +252,14 @@ export class EventRenderingService {
}
if (this.strategy.handleColumnChange) {
const eventId = columnChangeEvent.draggedElement.dataset.eventId || '';
const eventId = columnChangeEvent.originalElement.dataset.eventId || '';
this.strategy.handleColumnChange(columnChangeEvent);
}
});
this.dragMouseLeaveHeaderListener = (event: Event) => {
const { targetDate, mousePosition, originalElement, cloneElement } = (event as CustomEvent<DragMouseLeaveHeaderEventPayload>).detail;
const { targetDate, mousePosition, originalElement, draggedClone: cloneElement } = (event as CustomEvent<DragMouseLeaveHeaderEventPayload>).detail;
if (cloneElement)
cloneElement.style.display = '';

1
src/renderers/GridStyleManager.ts
View file

@ -49,6 +49,7 @@ export class GridStyleManager {
* Set time-related CSS variables
*/
private setTimeVariables(root: HTMLElement, gridSettings: GridSettings): void {
root.style.setProperty('--header-height', '80px'); // Fixed header height
root.style.setProperty('--hour-height', `${gridSettings.hourHeight}px`);
root.style.setProperty('--minute-height', `${gridSettings.hourHeight / 60}px`);
root.style.setProperty('--snap-interval', gridSettings.snapInterval.toString());