Z tzw. gestami myszy pierwszy raz styczność miałem kiedy taka funkcjonalność została wprowadzona do przeglądarki internetowej Opera. Nie trzeba było długo czekać, aby koncepcja ta pojawiła się w popularnych serwisach, takich jak choćby webowa aplikacja pocztowa Gmaila.

Tym, którzy nie wiedzą co to gesty myszy, powiem, że jest to drobna funkcjonalność, która przy przytrzymaniu wciśniętego odpowiedniego przycisku myszy i przesunięcie jej w odpowiedni sposób pozwala na wywołanie jakiejś funkcji.

W dzisiejszym artykule nauczymy się tworzyć taką funkcjonalność do użytku naszej strony inernetowej.

Aby zapewnić zgodność ze wszystkimi przeglądarkami, do kontrolowania zdarzeń takich jak naciśnięcie i zwolnienie przycisku myszy, użyjemy biblioteki jQuery. Można ją pobrać ze strony jquery.com.

Gesty

Aby nasza usługa gestów myszy była w miarę elastyczna, napiszemy funkcję, która będzie w zależności od wykonanego myszą ruchu zwracała typ gestu określony liczbą całkowitą (ze zbioru naturalnych ;).

Moment blokady przycisku myszy to zdarzenie onmousedown. Zwolnienie przycisku myszy to zdarzenie onmouseup.

Obiekt event, który przechowuje wszystkie informacje na temat zdarzenia posiada właściwość pageX, a także pageY. Zawierają one kolejno współrzędne x i y okna przeglądania witryny. Punkt 0 układu znajduje się w lewym górnym rogu okna przeglądania.

Dzięki rejestrowaniu tych wartości w momencie blokady przycisku i jego zwolnienia możemy mniej więcej określić jak użytkownik ruszył myszką.

Warunki

Załóżmy, że żeby ruch myszą w prawo był uznany za poprawny, muszą być spełnione następujące warunki:

• użytkownik musi przesunąć mysz o 300 do 1000 pikseli w prawo (w osi x)
• końcowa współrzędna y użytkownik może różnić się maksymalnie o 100 pikseli
• końcowa współrzędna x musi być większa od początkowej wartości x (w momencie blokowania przycisku) - to warunek ruchu myszy w prawo

Jeżeli wszystkie powyższe warunki są spełnione to gest - oznaczmy go liczbą 1 - jest uznany za wykonany.

Dla ruchu w lewo (gest nr 2) ustalamy następujące warunki:

• ruch w osi x o 300 do 1000 pikseli
• ruch w osi y o maks. 100 pikseli
• początkowa współprzędna x jest większa od końcowej współrzędnej x

Dla ruchu w górę (nr 3):

• ruch w osi y o 300 do 1000 pikseli
• ruch w osi x o maksymalnie 100 pikseli
• początkowa współrzędna y jest większa od końcowej

Dla ruchu w dół (nr 4):

• ruch w osi y o 300 do 1000 pikseli
• ruch w osi x o maksymalnie 100 pikseli
• początkowa współrzędna y jest mniejsza od końcowej

Na listingu nr 1 prezentuję funkcję detectMove(pos), która za argument przyjmuje obiekt z następującymi właściwościami:

• startX - początkowa współrzędna x
• startY - początkowa współrzędna y
• endX - końcowa współrzędna x
• endY - końcowa współrzędna y
• x - różnica położenia początkowego i końcowego w osi x
• y - różnica położenia początkowego i końcowego w osi y

Obiekt ten musimy wcześniej zdefiniować, ponieważ wartości do niego zapisujemy poza funkcją detectMove.

Zakres działania

Musimy także ustalić zakres działania w jakim gesty będą działały. Dla globalnych gestów najlepiej jest ustalić jako obiekt dla którego kontrolujemy mousedown i mouseup, na cały dokument. Ja tak właśnie zrobiłem. Można jednak ustalić tylko pewien wyznaczony zakres strony np. określony blok div.

Jeśli wykorzystujemy bibliotekę jQuery, co zalecam, polecenie wybierające odpowiedni obszar będzie wyglądało tak:

$(document);

albo tak:

$("div#jakiesId");

Przypisywanie działań do gestów

Na listingu nr 2 prezentuję moje przypisanie konkretnych akcji do gestów.

W liniach 27-28 zapisujemy początkowe dane gestu. W linii 29 zatrzymujemy domyślne akcje dla zdarzenia.

Następnie w liniach od 32-35 zapisujemy parametry końcowe gestu.

W linii 39 sprawdzamy czy funckja detectMove nie zwróciła przypadkiem wartości 0 (nie rozpoznano gestu). Jeśli wartość zmiennej ev jest większa od 0, to sprawdzane są akcje dla danego gestu.

W linii 63 "logujemy" do konsoli typ zdarzenia i to jakich ruch został wykonany w jakich osiach. Tę linię można usunąć po zakończeniu debugowania naszej aplikacji obsługującej gesty myszy. Jednak w czasie procesu jej tworzenia może się przydać do sprawdzenia, czy zostaje wykonane odpowiednie działanie i czy nie pomyliliśmy się przy ustalaniu warunków dla danego zdarzenia.

Demo do tego artykułu znajdziecie tutaj (pliki można pobrać). Gesty zostały zdefiniowane tak jak na listingu nr 2.