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

Improves drag and drop position calculation

Browse source 
Refines drag and drop functionality by calculating position relative to the column during drag and snapping to the grid on mouse up, resulting in more precise placement.

Addresses an issue where the dragged element's position was not correctly calculated relative to the target column.
This commit is contained in:
Janus C. H. Knudsen 2025-10-08 19:01:35 +02:00
parent a8b9767524
commit 75d03fe577
1 changed files with 27 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

37
src/managers/DragDropManager.ts
View file

@ -262,12 +262,15 @@ export class DragDropManager {
// Continue with normal drag behavior only if drag has started // Continue with normal drag behavior only if drag has started
if (this.isDragStarted && this.draggedElement && this.draggedClone) { if (this.isDragStarted && this.draggedElement && this.draggedClone) {
if (!this.draggedElement.hasAttribute("data-allday")) { if (!this.draggedElement.hasAttribute("data-allday")) {
// Calculate raw target position from mouse (no snapping yet) // Calculate raw position from mouse (no snapping)
const positionData = this.calculateDragPosition(currentPosition); const column = ColumnDetectionUtils.getColumnBounds(currentPosition);
if (positionData.column) { if (column) {
this.targetY = positionData.snappedY; // Store raw Y as target // Calculate raw Y position relative to column (accounting for mouse offset)
this.targetColumn = positionData.column; const columnRect = column.boundingClientRect;
const eventTopY = currentPosition.y - columnRect.top - this.mouseOffset.y;
this.targetY = Math.max(0, eventTopY); // Store raw Y as target (no snapping)
this.targetColumn = column;
// Start animation loop if not already running // Start animation loop if not already running
if (this.dragAnimationId === null) { if (this.dragAnimationId === null) {
@ -314,8 +317,22 @@ export class DragDropManager {
if (this.isDragStarted) { if (this.isDragStarted) {
const mousePosition: MousePosition = { x: event.clientX, y: event.clientY }; const mousePosition: MousePosition = { x: event.clientX, y: event.clientY };
// Use consolidated position calculation // Snap to grid on mouse up (like ResizeHandleManager)
const positionData = this.calculateDragPosition(mousePosition); const column = ColumnDetectionUtils.getColumnBounds(mousePosition);
if (!column) {
console.warn('No column detected on mouseUp');
return;
}
// Get current position and snap it to grid
const currentY = parseFloat(this.draggedClone?.style.top || '0');
const snappedY = this.calculateSnapPosition(mousePosition.y, column);
// Update clone to snapped position immediately
if (this.draggedClone) {
this.draggedClone.style.top = `${snappedY}px`;
}
// Detect drop target (swp-day-column or swp-day-header) // Detect drop target (swp-day-column or swp-day-header)
const dropTarget = this.detectDropTarget(mousePosition); const dropTarget = this.detectDropTarget(mousePosition);
@ -325,8 +342,8 @@ export class DragDropManager {
console.log('🎯 DragDropManager: Emitting drag:end', { console.log('🎯 DragDropManager: Emitting drag:end', {
draggedElement: this.draggedElement.dataset.eventId, draggedElement: this.draggedElement.dataset.eventId,
finalColumn: positionData.column, finalColumn: column,
finalY: positionData.snappedY, finalY: snappedY,
dropTarget: dropTarget, dropTarget: dropTarget,
isDragStarted: this.isDragStarted isDragStarted: this.isDragStarted
}); });
@ -335,7 +352,7 @@ export class DragDropManager {
originalElement: this.draggedElement, originalElement: this.draggedElement,
draggedClone: this.draggedClone, draggedClone: this.draggedClone,
mousePosition, mousePosition,
finalPosition: positionData, finalPosition: { column, snappedY },
target: dropTarget target: dropTarget
}; };
this.eventBus.emit('drag:end', dragEndPayload); this.eventBus.emit('drag:end', dragEndPayload);