From e1632c41c251d1dd4c53a053c40309c494cca2b4 Mon Sep 17 00:00:00 2001
From: "Torsten Schulz (local)" <tsschulz@gmx.net>
Date: Fri, 30 Jan 2026 11:13:51 +0100
Subject: [PATCH] Enhance drag-and-drop experience in DashboardWidget:
 Implement a visual drag ghost image during widget dragging for improved user
 feedback. Adjust dragging state styles, including opacity and border, to
 better indicate active dragging. This update aims to refine the overall
 interaction and visual cues during widget rearrangement.

---
 frontend/src/components/DashboardWidget.vue | 27 ++++++++++++++++++++-
 1 file changed, 26 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/DashboardWidget.vue b/frontend/src/components/DashboardWidget.vue
index 9a502e7..66e2129 100644
--- a/frontend/src/components/DashboardWidget.vue
+++ b/frontend/src/components/DashboardWidget.vue
@@ -226,6 +226,30 @@ export default {
       e.dataTransfer.effectAllowed = 'move';
       e.dataTransfer.setData('text/plain', this.widgetId);
       e.dataTransfer.setData('application/x-widget-id', this.widgetId);
+      
+      // Erstelle ein visuelles Drag-Ghost-Bild
+      const dragGhost = this.$el.cloneNode(true);
+      dragGhost.style.position = 'absolute';
+      dragGhost.style.top = '-9999px';
+      dragGhost.style.width = `${this.$el.offsetWidth}px`;
+      dragGhost.style.opacity = '0.8';
+      dragGhost.style.transform = 'rotate(-2deg)';
+      dragGhost.style.pointerEvents = 'none';
+      document.body.appendChild(dragGhost);
+      
+      // Setze das Drag-Image mit Offset, damit es unter dem Cursor erscheint
+      const rect = this.$el.getBoundingClientRect();
+      const offsetX = e.clientX - rect.left;
+      const offsetY = e.clientY - rect.top;
+      e.dataTransfer.setDragImage(dragGhost, offsetX, offsetY);
+      
+      // Entferne das Ghost-Element nach kurzer Verzögerung
+      setTimeout(() => {
+        if (dragGhost.parentNode) {
+          dragGhost.parentNode.removeChild(dragGhost);
+        }
+      }, 0);
+      
       this.$emit('drag-start', { widgetId: this.widgetId, event: e });
     },
     onDragEnd() {
@@ -267,9 +291,10 @@ export default {
   transition: opacity 0.2s ease, box-shadow 0.2s ease;
 }
 .dashboard-widget.is-dragging {
-  opacity: 0.6;
+  opacity: 0.4;
   box-shadow: 0 4px 12px rgba(0,0,0,0.2);
   cursor: grabbing;
+  border: 2px dashed #0d6efd;
 }
 
 .dashboard-widget__titlebar {