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 to use the original element as the source and introduces edge scrolling.

This change aims to enhance the user experience during drag and drop operations by ensuring the correct element is used as the source, fixing issues, and by automatically scrolling the view when the dragged element reaches the edge of the scrollable area.
This commit is contained in:
Janus C. H. Knudsen 2025-10-12 22:00:02 +02:00
parent 8df1f6c4f1
commit e620c919aa
6 changed files with 120 additions and 121 deletions
Download patch file Download diff file Expand all files Collapse all files

8
src/types/EventTypes.ts
View file

@ -18,7 +18,7 @@ export interface MousePosition {
// Drag start event payload
export interface DragStartEventPayload {
draggedElement: HTMLElement;
originalElement: HTMLElement;
draggedClone: HTMLElement | null;
mousePosition: MousePosition;
mouseOffset: MousePosition;
@ -27,7 +27,7 @@ export interface DragStartEventPayload {
// Drag move event payload
export interface DragMoveEventPayload {
draggedElement: HTMLElement;
originalElement: HTMLElement;
draggedClone: HTMLElement;
mousePosition: MousePosition;
mouseOffset: MousePosition;
@ -39,8 +39,8 @@ export interface DragMoveEventPayload {
export interface DragEndEventPayload {
originalElement: HTMLElement;
draggedClone: HTMLElement | null;
sourceColumn: ColumnBounds | null; // Where drag started
mousePosition: MousePosition;
sourceColumn: ColumnBounds;
finalPosition: {
column: ColumnBounds | null; // Where drag ended
snappedY: number;
@ -55,7 +55,6 @@ export interface DragMouseEnterHeaderEventPayload {
originalElement: HTMLElement | null;
draggedClone: HTMLElement;
calendarEvent: CalendarEvent;
// Delegate pattern - allows subscriber to replace the dragged clone
replaceClone: (newClone: HTMLElement) => void;
}
@ -75,7 +74,6 @@ export interface DragMouseEnterColumnEventPayload {
originalElement: HTMLElement | null;
draggedClone: HTMLElement;
calendarEvent: CalendarEvent;
// Delegate pattern - allows subscriber to replace the dragged clone
replaceClone: (newClone: HTMLElement) => void;
}