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:
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user