Draggable: das Chat-Fenster zum Verschieben

In Dashboards und Arbeits-Tools gibt es keine Ecke, die immer frei ist: Mal verdeckt der Chat die Tabelle, mal das Diagramm. Die Lösung ist ein Fenster, das die Nutzerin selbst dorthin schiebt, wo es gerade nicht stört.

Das Prinzip: der Container bewegt sich, nicht das Widget

Das Widget wird einmal in ein absolut positioniertes Fenster gerendert. Verschoben wird nur der Container per CSS-Transform. Für das Widget ändert sich nichts, die Konversation läuft ungestört weiter:

zE('messenger', 'render', {
  mode: 'embedded',
  widget: { targetElement: '#chat-fenster-inhalt' },
});

Wichtig wie immer im Embedded Mode: kein zweiter render-Aufruf. Wer das Fenster «neu positionieren» will, verschiebt es. Rendern lässt es sich pro Seitenaufruf nur einmal.

Pointer Events statt Maus-Gefrickel

pointerdown/pointermove/pointerup decken Maus, Touch und Stift gleichzeitig ab. Drei Details machen den Unterschied:

griff.addEventListener('pointerdown', (e) => {
  griff.setPointerCapture(e.pointerId); // Move-Events bleiben beim Griff,
  merkePosition(e);                     // auch wenn der Zeiger das Element verlässt
});

• setPointerCapture: ohne das reisst der Drag ab, sobald der Zeiger schneller ist als das Fenster.
• touch-action: none auf der Titelleiste: sonst scrollt der Touch-Browser statt zu ziehen.
• Nur die Titelleiste ist Griff, nicht das ganze Fenster: sonst lässt sich im Chat kein Text mehr markieren.

Grenzen setzen

Ein Fenster, das sich aus dem Viewport schieben lässt, ist verloren. Beim Ziehen wird die Verschiebung deshalb gegen den erlaubten Bereich geklemmt:

dx = Math.max(bereich.left - fenster.left, Math.min(dx, bereich.right - fenster.right));
dy = Math.max(bereich.top - fenster.top, Math.min(dy, bereich.bottom - fenster.bottom));

Dazu gehört ein Reset-Knopf in der Titelleiste: ein Klick, und das Fenster sitzt wieder an der Startposition. Die billigste Versicherung gegen «wo ist mein Chat hin?».

Wann sich das lohnt

Interne Tools, Dashboards, Konfiguratoren: überall, wo Nutzer lange auf derselben Seite arbeiten und der Chat ein Begleiter ist, kein Hauptdarsteller. Für normale Websites bleibt der Custom Launcher oder die Seitenleiste das ruhigere Muster.