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
if (this.isDragStarted && this.draggedElement && this.draggedClone) {
if (!this.draggedElement.hasAttribute("data-allday")) {
// Calculate raw target position from mouse (no snapping yet)
const positionData = this.calculateDragPosition(currentPosition);
// Calculate raw position from mouse (no snapping)
const column = ColumnDetectionUtils.getColumnBounds(currentPosition);
if (positionData.column) {
this.targetY = positionData.snappedY; // Store raw Y as target
this.targetColumn = positionData.column;
if (column) {
// Calculate raw Y position relative to column (accounting for mouse offset)
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
if (this.dragAnimationId === null) {
@ -314,8 +317,22 @@ export class DragDropManager {
if (this.isDragStarted) {
const mousePosition: MousePosition = { x: event.clientX, y: event.clientY };
// Use consolidated position calculation
const positionData = this.calculateDragPosition(mousePosition);
// Snap to grid on mouse up (like ResizeHandleManager)
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)
const dropTarget = this.detectDropTarget(mousePosition);
@ -325,8 +342,8 @@ export class DragDropManager {
console.log('🎯 DragDropManager: Emitting drag:end', {
draggedElement: this.draggedElement.dataset.eventId,
finalColumn: positionData.column,
finalY: positionData.snappedY,
finalColumn: column,
finalY: snappedY,
dropTarget: dropTarget,
isDragStarted: this.isDragStarted
});
@ -335,7 +352,7 @@ export class DragDropManager {
originalElement: this.draggedElement,
draggedClone: this.draggedClone,
mousePosition,
finalPosition: positionData,
finalPosition: { column, snappedY },
target: dropTarget
};
this.eventBus.emit('drag:end', dragEndPayload);