Jak stworzyć gesty na wersji mobile?

pytanie zadane 1 lutego 2019 w JavaScript przez rafal.budzis Szeryf (85,260 p.)

Hej próbuje zrobić zamykanie modala po przeciągnięciu palcem w dół lub w górę. Chce osiągnąć dokładnie taki rezultat jak na Google grafika w wersji mobile gdy klikniemy dowolne wyszukane zdjęcie.

Wewnątrz mojego modala posiadam zakładki które można przeciągać w prawą lub lewą stronę.

Obecnie rozwiązałem to poprzez użycie slick slider. Modal jest tworzony z sliderem wertykalnie a zakładki wewnątrz są horyzontalnie. Mój problem polega na tym ze gdy przesuwamy zakładki prawo/lewo modal rusza się góra dół podczas przesuwania. Google ma to na tyle fajnie zrobione ze gdy zaczniemy przesuwać w prawo nie możemy przesunąć w dół dopóki nie oderwiemy palca od ekranu.

Znacie jakąś bibliotekę która dała by mi takie rozwiązanie w standardzie? Projekt pisze w React jednak jestem otwarty na zwykłe java scriptowe biblioteki które będę mógł odpowiednio zintegrować z React samodzielnie.

PS. Macie swoje ulubione gesty które pomagają wam w nawigowaniu po swoim ulubionych aplikacjach? Jeśli tak opiszcie je. Staram się obecnie dodać jak największą ilość gestów do mojego projektu dlatego chętnie przyjmę wskazówki na czym skupić uwagę.

1 odpowiedź

odpowiedź 1 lutego 2019 przez Ivan Maniak (60,650 p.)

Trzy eventy: touchstart touchmove touchend
Biblioteki chyba sam sobie znajdziesz [google: touch event js library]

komentarz 1 lutego 2019 przez rafal.budzis Szeryf (85,260 p.)

Nie znalazłem nic ciekawego i uwierz szukałem ;) Potrzebuje zachować działanie slick slidera a tymczasem znalazłem biblioteki tylko przeznaczone pod gesty. Wówczas musiał bym pisać swój slider :/

Mam w sumie pomysł aby zrobić DIVa przed wszyskimi i łapać w nim eventy touch a następnie symulować touch w lini prostej w dalszych elementach. Na podstawie pierwszego pociągnięcia gdzie mógłbym wyznaczyć kąt w radianach za pomocą Math.atan2. Jednak wolałbym zaleźć jakieś rozwiązanie które nie bedzie wymagało dodatkowej pracy ;)