torsten/yourpart3
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Enhance drag-and-drop functionality in LoggedInView: Update event handling to include event parameters for improved debugging and clarity. Add console logs to track drag-and-drop actions, enhancing the user experience during widget rearrangement.

Browse Source
This commit is contained in:
Torsten Schulz (local)
2026-01-30 13:29:01 +01:00
parent b52327db2e
commit ae71a066c7
1 changed files with 14 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
frontend/src/views/home/LoggedInView.vue
View File

@@ -60,7 +60,7 @@
v-else v-else
class="dashboard-grid" class="dashboard-grid"
@dragover.prevent @dragover.prevent
@drop="onGridDrop" @drop.prevent="onGridDrop"
> >
<template v-for="(w, index) in widgets" :key="w.id"> <template v-for="(w, index) in widgets" :key="w.id">
<!-- Platzhalter vor dem Widget: Drop hier = Einfügen an index --> <!-- Platzhalter vor dem Widget: Drop hier = Einfügen an index -->
@@ -68,7 +68,7 @@
v-if="dragOverIndex === index && draggedIndex !== null && draggedIndex !== index" v-if="dragOverIndex === index && draggedIndex !== null && draggedIndex !== index"
class="dashboard-grid-cell dashboard-drop-indicator" class="dashboard-grid-cell dashboard-drop-indicator"
@dragover.prevent="setDropTarget(index)" @dragover.prevent="setDropTarget(index)"
@drop.prevent.stop="onDrop(index)" @drop.prevent.stop="onDrop(index, $event)"
> >
<div class="drop-indicator-line"></div> <div class="drop-indicator-line"></div>
</div> </div>
@@ -80,7 +80,7 @@
}" }"
@dragover.prevent="() => setDropTarget(index)" @dragover.prevent="() => setDropTarget(index)"
@dragleave="clearDropTarget" @dragleave="clearDropTarget"
@drop="onDrop(index)" @drop="onDrop(index, $event)"
> >
<DashboardWidget <DashboardWidget
v-if="!editMode" v-if="!editMode"
@@ -263,6 +263,7 @@ export default {
setDropTarget(index) { setDropTarget(index) {
if (this.draggedIndex !== null && this.draggedIndex !== index) { if (this.draggedIndex !== null && this.draggedIndex !== index) {
this.dragOverIndex = index; this.dragOverIndex = index;
console.log('[Dashboard Drag] setDropTarget:', index, '→ dragOverIndex =', index);
} }
}, },
clearDropTarget() { clearDropTarget() {
@@ -274,33 +275,40 @@ export default {
this.dragOverIndex = this.widgets.length; this.dragOverIndex = this.widgets.length;
} }
}, },
async onGridDrop() { async onGridDrop(e) {
console.log('[Dashboard Drag] onGridDrop — target:', e?.target?.className, 'dragOverIndex:', this.dragOverIndex, 'draggedIndex:', this.draggedIndex);
if (this.draggedIndex == null) return; if (this.draggedIndex == null) return;
const from = this.draggedIndex; const from = this.draggedIndex;
// Wenn Drop auf Grid landet: zuletzt angezeigte Einfügeposition nutzen (sonst ans Ende)
const to = this.dragOverIndex != null ? this.dragOverIndex : this.widgets.length; const to = this.dragOverIndex != null ? this.dragOverIndex : this.widgets.length;
console.log('[Dashboard Drag] onGridDrop → from:', from, 'to:', to, 'widgets.length:', this.widgets.length);
if (from === to || to < 0 || to > this.widgets.length) { if (from === to || to < 0 || to > this.widgets.length) {
console.log('[Dashboard Drag] onGridDrop — abgebrochen (ungültig)');
this.draggedIndex = null; this.draggedIndex = null;
this.dragOverIndex = null; this.dragOverIndex = null;
return; return;
} }
const item = this.widgets.splice(from, 1)[0]; const item = this.widgets.splice(from, 1)[0];
this.widgets.splice(to, 0, item); this.widgets.splice(to, 0, item);
console.log('[Dashboard Drag] onGridDrop — erledigt. Neue Reihenfolge (titles):', this.widgets.map(w => w.title));
this.draggedIndex = null; this.draggedIndex = null;
this.dragOverIndex = null; this.dragOverIndex = null;
await this.saveConfig(); await this.saveConfig();
}, },
async onDrop(toIndex) { async onDrop(toIndex, e) {
console.log('[Dashboard Drag] onDrop — target:', e?.target?.className, 'toIndex:', toIndex, 'draggedIndex:', this.draggedIndex);
if (this.draggedIndex == null) return; if (this.draggedIndex == null) return;
const from = this.draggedIndex; const from = this.draggedIndex;
const to = toIndex; const to = toIndex;
console.log('[Dashboard Drag] onDrop → from:', from, 'to:', to);
if (from === to) { if (from === to) {
console.log('[Dashboard Drag] onDrop — abgebrochen (from === to)');
this.draggedIndex = null; this.draggedIndex = null;
this.dragOverIndex = null; this.dragOverIndex = null;
return; return;
} }
const item = this.widgets.splice(from, 1)[0]; const item = this.widgets.splice(from, 1)[0];
this.widgets.splice(to, 0, item); this.widgets.splice(to, 0, item);
console.log('[Dashboard Drag] onDrop — erledigt. Neue Reihenfolge (titles):', this.widgets.map(w => w.title));
this.draggedIndex = null; this.draggedIndex = null;
this.dragOverIndex = null; this.dragOverIndex = null;
await this.saveConfig(); await this.saveConfig();