Unter der Haube: Drag, Touch und CSS-Kaskadierung

Ein anpassbares UI-Panel zu bauen, ist schwieriger, als es aussieht. Man muss Layouts, Touch-Events und CSS-Regeln gleichzeitig verwalten.

Hier sind drei technische Lektionen aus meinem jüngsten Redesign eines Visual-Diff-UI.

  1. Verwenden Sie die Fensterbreite nicht mehr für Layouts

Verwenden Sie window.innerWidth nicht, um zu entscheiden, ob Ihr Layout vertikal oder horizontal ist. Wenn ein Benutzer das Fenster skaliert, bricht Ihre Logik zusammen.

Verwenden Sie stattdessen den tatsächlichen CSS-Zustand. Nutzen Sie getComputedStyle, um die flex-direction zu prüfen. Dies liest den echten Wert aus, nachdem alle Media Queries angewendet wurden. So wird sichergestellt, dass Ihre Drag-Logik mit dem übereinstimmt, was der Benutzer tatsächlich sieht.

  1. Behandeln Sie Touch- und Mouse-Events gemeinsam

Um das Ziehen (Dragging) sowohl auf dem Desktop als auch auf Mobilgeräten zu ermöglichen, benötigen Sie einen einheitlichen Ansatz.

  • Nutzen Sie Optional Chaining, um Koordinaten zu extrahieren. Dies ermöglicht es einer einzigen Funktion, sowohl Mouse- als auch Touch-Events zu verarbeiten.
  • Verwenden Sie { passive: false } für touchmove. Browser setzen Touch-Events standardmäßig auf "passive", um das Scrollen zu unterstützen. Wenn Sie dies nicht auf false setzen, können Sie e.preventDefault() nicht aufrufen. Ohne diesen Aufruf scrollt die Seite, während Sie versuchen zu ziehen.
  • Binden Sie move- und end-Listener an das document an. Wenn ein Benutzer seinen Finger zu schnell bewegt, kann er den Trenner verlassen. Das Anbinden an das document stellt sicher, dass das Ziehen fortgesetzt wird, selbst wenn der Zeiger abweicht.
  1. Vermeiden Sie Kämpfe mit Ihrem Sichtbarkeitssystem

Ich bin auf einen CSS-Spezifitätsfehler gestoßen. Ich hatte eine Klasse, um Panels auszublenden, und eine andere, um die Layout-Richtung festzulegen.

Das Problem:

  • .view-panel { display: none; }
  • .diff-layout { display: flex; }

Da diese die gleiche Spezifität hatten, gewann diejenige, die zuletzt in der Datei stand. Das bedeutete, dass meine Panels sichtbar blieben, obwohl sie hätten ausgeblendet werden sollen.

Die Lösung: Lassen Sie eine Layout-Hilfsklasse niemals die display-Eigenschaft setzen. Überlassen Sie dies der Sichtbarkeitsklasse.

Anstatt: .diff-layout { display: flex; flex-direction: column; }

Nutzen Sie: .view-panel.diff-layout { flex-direction: column; }

Dies erhöht die Spezifität und stellt sicher, dass die Layout-Klasse nur die Richtung ändert, nicht die Sichtbarkeit.

Quelle: https://dev.to/bonzai2carn/under-the-hood-drag-touch-and-css-cascade-in-a-real-diff-ui-1b66