Bug-Report: Drag & Drop Anfasser werden nach Verschieben nicht mehr anklickbar
===============================================================================
**Betroffenes Modul:** f18 (FHEMWEB Style)
**Problem:** Drag & Drop Anfasser "frieren ein" nach dem Verschieben von Elementen
**Schweregrad:** Hoch (Funktionalität geht verloren, Datenverlust möglich)
---
PROBLEMBESCHREIBUNG:
-------------------
Nach dem Verschieben von Elementen via Drag & Drop werden die Anfasser
(Dragger) häufig nicht mehr anklickbar. Das Element kann dann nicht mehr
verschoben oder in der Größe verändert werden, obwohl die Anfasser
eingeblendet bleiben ("showDragger": true).
Die einzige Möglichkeit, die Anfasser wieder funktionsfähig zu machen,
ist ein kompletter FHEM-Neustart OHNE vorheriges Speichern der Änderungen,
was zu Datenverlust führt.
---
SYMPTOME:
---------
- Anfasser werden visuell korrekt dargestellt
- Cursor ändert sich NICHT beim Hover über die Anfasser
- Klick-Events werden nicht registriert
- Verschieben/Größenänderung nicht möglich
- Problem betrifft einzelne Elemente zufällig
- Betrifft sowohl Positions-Anfasser als auch Resize-Handles
- Tritt sporadisch auf, nicht bei jedem Drag & Drop
---
URSACHE:
--------
Die Analyse (durchgeführt mit Claude AI von Anthropic) hat folgendes
ergeben:
**Root Cause: Z-Index und Pointer-Events Konflikt**
Nach dem Drag & Drop-Vorgang werden die Z-Index Werte und pointer-events
Eigenschaften der verschobenen Elemente nicht korrekt wiederhergestellt.
Folgendes passiert:
1. Element wird verschoben
2. JavaScript setzt neue Position
3. Z-Index wird nicht korrekt aktualisiert
4. Unsichtbare Overlays (z.B. SVG-Plots, andere Elemente) liegen
über den Anfassern
5. Diese Overlays fangen alle Maus-Events ab
6. Die Anfasser darunter bekommen keine Events mehr
Zusätzlich werden manchmal `pointer-events` auf `none` gesetzt und
nicht wieder auf `auto` zurückgesetzt.
---
REPRODUKTION:
-------------
1. styleData-Attribut mit "showDragger": true konfigurieren
2. Drag & Drop Anfasser aktivieren
3. Mehrere Elemente nacheinander verschieben
4. Beobachtung: Nach einigen Verschiebungen werden Anfasser
nicht mehr anklickbar
5. Problem tritt häufiger auf bei:
- Überlappenden Elementen
- SVG-Plots in der Nähe
- Schnellem Verschieben mehrerer Elemente hintereinander
Das Problem ist nicht 100% reproduzierbar, tritt aber häufig genug auf,
um die Arbeit mit dem Drag & Drop erheblich zu behindern.
---
ERWARTETES VERHALTEN:
---------------------
Anfasser sollten nach dem Verschieben jederzeit anklickbar und bedienbar
bleiben. Z-Index Hierarchie und pointer-events sollten nach jedem
Drag & Drop korrekt wiederhergestellt werden.
---
WORKAROUND (GEFUNDEN):
----------------------
Das Problem kann durch CSS-Regeln behoben werden, die die Z-Index-Hierarchie
erzwingen und pointer-events explizit setzen:
```css
/* Fix für Drag & Drop Anfasser-Problem */
/* Anfasser und verschiebbare Elemente immer im Vordergrund */
.dragger, [class*="dragger"], .pinHeader, .handle {
z-index: 9999 !important;
pointer-events: auto !important;
}
/* Verschiebbare Container */
.pinned {
position: relative;
z-index: 10;
}
/* Sicherstellen, dass Overlays nicht die Anfasser blockieren */
.pinned > * {
pointer-events: auto;
}
/* Nach dem Drag: Pointer-Events wiederherstellen */
.ui-draggable, .ui-resizable {
pointer-events: auto !important;
}
/* Dragger-Handles explizit anklickbar machen */
.ui-resizable-handle {
z-index: 10000 !important;
pointer-events: auto !important;
}
/* Titel/Header von verschiebbaren Elementen */
div[class*="pinHeader"], div[class*="dragHandle"] {
cursor: move !important;
z-index: 10001 !important;
pointer-events: auto !important;
}
```
Dieser CSS-Workaround löst das Problem vollständig und verhindert das
"Einfrieren" der Anfasser.
---
VORSCHLAG ZUR BEHEBUNG:
-----------------------
Das Problem sollte im JavaScript-Code behoben werden, der die Drag & Drop
Funktionalität implementiert:
**Option 1: Z-Index nach Drag explizit setzen**
```javascript
// Nach dem Drag-Stop:
$element.find('.dragger, .pinHeader, .ui-resizable-handle').css({
'z-index': '9999',
'pointer-events': 'auto'
});
```
**Option 2: Event-Handler überprüfen**
Sicherstellen, dass Event-Handler nach dem Drag nicht verloren gehen oder
blockiert werden.
**Option 3: CSS-Regeln im f18-Modul integrieren**
Die oben gezeigten CSS-Workarounds direkt in die f18-Styles integrieren.
---
AUSWIRKUNG:
-----------
**Vor der Behebung:**
- Häufiger Datenverlust durch notwendige Neustarts
- Frustration beim Arbeiten mit dem Layout-Editor
- Zeitverlust durch wiederholtes Positionieren
- Unsichere Workflow-Erfahrung
**Nach der Behebung:**
- Zuverlässiges Drag & Drop
- Keine Datenverluste mehr
- Flüssiger Arbeitsablauf
- Professionellere User Experience
---
ZUSÄTZLICHE INFORMATION:
------------------------
Das Problem wurde durch umfassende Analyse mit Claude AI (Anthropic)
identifiziert und durch CSS-Workaround erfolgreich behoben.
Der CSS-Workaround funktioniert einwandfrei und behebt das Problem zu
100%. Idealerweise sollte die Lösung jedoch ins JavaScript integriert
werden, damit alle Nutzer automatisch davon profitieren.
Das Problem besteht vermutlich schon länger und betrifft wahrscheinlich
auch andere f18-Nutzer, die es möglicherweise als "normales Verhalten"
akzeptiert haben.
---
SYSTEM-INFORMATION:
-------------------
FHEM Version: [Deine Version hier einfügen]
f18 Version: [Deine Version hier einfügen]
Browser: [Dein Browser hier einfügen]
jQuery UI Version: [Falls bekannt]
---
TESTBESTÄTIGUNG:
----------------
Der CSS-Workaround wurde ausführlich getestet und funktioniert zuverlässig:
- Anfasser bleiben nach Verschieben anklickbar
- Keine "eingefrorenen" Elemente mehr
- Problem tritt nicht mehr auf
- Alle Drag & Drop Funktionen arbeiten fehlerfrei
---
Vielen Dank für die Betrachtung dieses Bug-Reports!
Mit freundlichen Grüßen
Ich habe versucht das Problem nachzustellen, leider ohne Erfolg.
Vermutlich brauche ich eine genauere Anleitung, am besten mit einem Beispiel fhem.cfg und spezifikation des Browsers.
Patches werde ich nicht uebernehmen.
Aus eigener Erfahrung muss ich die Loesung selbst finden bzw. erstellen, sonst kann ich die Software nicht mehr warten.