Improve drag-and-drop indicators in LoggedInView: Enhance visual cues for widget insertion by updating placeholder comments and adding event handlers for drag-and-drop actions. This update aims to provide clearer instructions for users during widget rearrangement.

This commit is contained in:
Torsten Schulz (local)
2026-01-30 11:44:08 +01:00
parent e1632c41c2
commit 0f78c624b1

View File

@@ -63,10 +63,12 @@
@drop="onGridDrop" @drop="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, wenn hier eingefügt werden soll --> <!-- Platzhalter vor dem Widget: Drop hier = Einfügen an index -->
<div <div
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)"
@drop.prevent="onDrop(index)"
> >
<div class="drop-indicator-line"></div> <div class="drop-indicator-line"></div>
</div> </div>
@@ -108,10 +110,12 @@
</button> </button>
</div> </div>
</div> </div>
<!-- Platzhalter am Ende, wenn dort eingefügt werden soll --> <!-- Platzhalter am Ende: Drop hier = An Ende einfügen -->
<div <div
v-if="dragOverIndex === widgets.length && draggedIndex !== null" v-if="dragOverIndex === widgets.length && draggedIndex !== null"
class="dashboard-grid-cell dashboard-drop-indicator" class="dashboard-grid-cell dashboard-drop-indicator"
@dragover.prevent="onGridDragover"
@drop.prevent="onGridDrop"
> >
<div class="drop-indicator-line"></div> <div class="drop-indicator-line"></div>
</div> </div>