Pod maską: Przeciąganie, dotyk i kaskada CSS

Budowanie panelu UI z możliwością zmiany rozmiaru jest trudniejsze, niż się wydaje. Musisz jednocześnie zarządzać układami, zdarzeniami dotykowymi i regułami CSS.

Oto trzy techniczne lekcje z mojego niedawnego przeprojektowania interfejsu visual-diff.

  1. Przestań używać szerokości okna do układów

Nie używaj window.innerWidth, aby zdecydować, czy Twój układ jest pionowy, czy poziomy. Jeśli użytkownik zmieni rozmiar okna, Twoja logika przestanie działać.

Zamiast tego użyj faktycznego stanu CSS. Użyj getComputedStyle, aby sprawdzić flex-direction. Odczytuje to rzeczywistą wartość po zastosowaniu wszystkich media queries. Dzięki temu logika przeciągania będzie zgodna z tym, co użytkownik faktycznie widzi.

  1. Obsługuj zdarzenia dotykowe i myszy razem

Aby przeciąganie działało zarówno na komputerach stacjonarnych, jak i urządzeniach mobilnych, potrzebujesz ujednoliconego podejścia.

  • Użyj optional chaining, aby wyodrębnić współrzędne. Pozwala to jednej funkcji obsługiwać zarówno zdarzenia myszy, jak i dotyku.
  • Użyj { passive: false } dla touchmove. Przeglądarki domyślnie ustawiają zdarzenia dotykowe jako pasywne, aby ułatwić przewijanie. Jeśli nie ustawisz tego na false, nie będziesz mógł wywołać e.preventDefault(). Bez tego wywołania strona będzie się przewijać podczas próby przeciągania.
  • Podepnij listenery move i end do dokumentu. Jeśli użytkownik przesunie palec zbyt szybko, może on „wyjść” poza dzielnik. Podpięcie ich do dokumentu gwarantuje, że przeciąganie będzie kontynuowane, nawet jeśli wskaźnik się przesunie.
  1. Unikaj walki z systemem widoczności

Natknąłem się na błąd specyficzności CSS. Miałem jedną klasę do ukrywania paneli i inną do ustawiania kierunku układu.

Problem:

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

Ponieważ miały one taką samą specyficzność, wygrała ta, która znajdowała się ostatnia w pliku. Oznaczało to, że moje panele pozostawały widoczne, nawet gdy powinny być ukryte.

Rozwiązanie: Nigdy nie pozwól klasie pomocniczej układu ustawiać właściwości display. Niech ta właściwość należy do klasy odpowiedzialnej za widoczność.

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

Użyj: .view-panel.diff-layout { flex-direction: column; }

Zwiększa to specyficzność i gwarantuje, że klasa układu zmienia tylko kierunek, a nie widoczność.

Źródło: https://dev.to/bonzai2carn/under-the-hood-drag-touch-and-css-cascade-in-a-real-diff-ui-1b66