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

27
src/managers/AllDayManager.ts
View file

@ -74,7 +74,7 @@ export class AllDayManager {
});
eventBus.on('drag:column-change', (event) => {
const { draggedElement, draggedClone, mousePosition } = (event as CustomEvent<DragColumnChangeEventPayload>).detail;
const { originalElement: draggedElement, draggedClone, mousePosition } = (event as CustomEvent<DragColumnChangeEventPayload>).detail;
if (draggedClone == null)
return;
@ -316,8 +316,13 @@ export class AllDayManager {
* During drag: Place in row 1 only, calculate column from targetDate
*/
private handleConvertToAllDay(payload: DragMouseEnterHeaderEventPayload): void {
if(payload.draggedClone?.dataset == null)
console.error("payload.cloneElement.dataset.eventId is null");
console.log('🔄 AllDayManager: Converting to all-day (row 1 only during drag)', {
eventId: payload.cloneElement.dataset.eventId,
eventId: payload.draggedClone.dataset.eventId,
targetDate: payload.targetColumn
});
@ -325,17 +330,18 @@ export class AllDayManager {
let allDayContainer = this.getAllDayContainer();
payload.cloneElement.removeAttribute('style');
payload.cloneElement.classList.add('all-day-style');
payload.cloneElement.style.gridRow = '1';
payload.cloneElement.style.gridColumn = payload.targetColumn.index.toString();
payload.cloneElement.dataset.allday = 'true'; // Set the all-day attribute for filtering
payload.draggedClone.removeAttribute('style');
payload.draggedClone.style.gridRow = '1';
payload.draggedClone.style.gridColumn = payload.targetColumn.index.toString();
payload.draggedClone.dataset.allday = 'true'; // Set the all-day attribute for filtering
// Add to container
allDayContainer?.appendChild(payload.cloneElement);
allDayContainer?.appendChild(payload.draggedClone);
ColumnDetectionUtils.updateColumnBoundsCache();
console.log('✅ AllDayManager: Converted to all-day style (simple row 1)', {
eventId: payload.cloneElement.dataset.eventId,
eventId: payload.draggedClone.dataset.eventId,
gridColumn: payload.targetColumn,
gridRow: 1
});
@ -459,7 +465,7 @@ export class AllDayManager {
if (oldGridArea !== newGridArea) {
changedCount++;
const element = document.querySelector(`[data-event-id="${layout.calenderEvent.id}"]`) as HTMLElement;
const element = dragEndEvent.draggedClone; //:end document.querySelector(`[data-event-id="${layout.calenderEvent.id}"]`) as HTMLElement;
if (element) {
// Add transition class for smooth animation
@ -481,6 +487,7 @@ export class AllDayManager {
dragEndEvent.draggedClone.style.opacity = '';
// 7. Restore original element opacity
dragEndEvent.originalElement.remove();
//originalElement.style.opacity = '';
// 8. Check if height adjustment is needed