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

2
src/renderers/AllDayEventRenderer.ts
View file

@ -40,7 +40,7 @@ export class AllDayEventRenderer {
*/
public handleDragStart(payload: DragStartEventPayload): void {
this.originalEvent = payload.draggedElement;;
this.originalEvent = payload.originalElement;;
this.draggedClone = payload.draggedClone;
if (this.draggedClone) {

2
src/renderers/EventRenderer.ts
View file

@ -56,7 +56,7 @@ export class DateEventRenderer implements EventRendererStrategy {
*/
public handleDragStart(payload: DragStartEventPayload): void {
this.originalEvent = payload.draggedElement;;
this.originalEvent = payload.originalElement;;
// Use the clone from the payload instead of creating a new one
this.draggedClone = payload.draggedClone;

5
src/renderers/EventRendererManager.ts
View file

@ -138,11 +138,11 @@ export class EventRenderingService {
this.eventBus.on('drag:start', (event: Event) => {
const dragStartPayload = (event as CustomEvent<DragStartEventPayload>).detail;
if (dragStartPayload.draggedElement.hasAttribute('data-allday')) {
if (dragStartPayload.originalElement.hasAttribute('data-allday')) {
return;
}
if (dragStartPayload.draggedElement && this.strategy.handleDragStart && dragStartPayload.columnBounds) {
if (dragStartPayload.originalElement && this.strategy.handleDragStart && dragStartPayload.columnBounds) {
this.strategy.handleDragStart(dragStartPayload);
}
});
@ -163,6 +163,7 @@ export class EventRenderingService {
private setupDragEndListener(): void {
this.eventBus.on('drag:end', (event: Event) => {
const { originalElement: draggedElement, sourceColumn, finalPosition, target } = (event as CustomEvent<DragEndEventPayload>).detail;
const finalColumn = finalPosition.column;
const finalY = finalPosition.snappedY;