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
class="dashboard-grid"
@dragover.prevent
@drop="onGridDrop"
@drop.prevent="onGridDrop"
>
<template v-for="(w, index) in widgets" :key="w.id">
<!-- Platzhalter vor dem Widget: Drop hier = Einfügen an index -->
@@ -68,7 +68,7 @@
v-if="dragOverIndex === index && draggedIndex !== null && draggedIndex !== index"
class="dashboard-grid-cell dashboard-drop-indicator"
@dragover.prevent="setDropTarget(index)"
@drop.prevent.stop="onDrop(index)"
@drop.prevent.stop="onDrop(index, $event)"
>
<div class="drop-indicator-line"></div>
</div>
@@ -80,7 +80,7 @@
}"
@dragover.prevent="() => setDropTarget(index)"
@dragleave="clearDropTarget"
@drop="onDrop(index)"
@drop="onDrop(index, $event)"
>
<DashboardWidget
v-if="!editMode"
@@ -263,6 +263,7 @@ export default {
setDropTarget(index) {
if (this.draggedIndex !== null && this.draggedIndex !== index) {
this.dragOverIndex = index;
console.log('[Dashboard Drag] setDropTarget:', index, '→ dragOverIndex =', index);
}
},
clearDropTarget() {
@@ -274,33 +275,40 @@ export default {
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;
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;
console.log('[Dashboard Drag] onGridDrop → from:', from, 'to:', to, 'widgets.length:', this.widgets.length);
if (from === to || to < 0 || to > this.widgets.length) {
console.log('[Dashboard Drag] onGridDrop — abgebrochen (ungültig)');
this.draggedIndex = null;
this.dragOverIndex = null;
return;
}
const item = this.widgets.splice(from, 1)[0];
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.dragOverIndex = null;
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;
const from = this.draggedIndex;
const to = toIndex;
console.log('[Dashboard Drag] onDrop → from:', from, 'to:', to);
if (from === to) {
console.log('[Dashboard Drag] onDrop — abgebrochen (from === to)');
this.draggedIndex = null;
this.dragOverIndex = null;
return;
}
const item = this.widgets.splice(from, 1)[0];
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.dragOverIndex = null;
await this.saveConfig();