Jak uzyskać kierunek i odległość za pomocą zdarzenia przeciągnięcia urządzenia mobilnego jQuery

Question

Czy możliwe jest uzyskanie kierunku i odległości w funkcji wywołania zwrotnego podczas korzystania z zdarzenia przeciągnięcia urządzenia mobilnego jQuery? Nie znalazłem nic o tym w official docs.

TouchSwipe jest dobrą alternatywą, ale potrzebuję formularza zdarzenia tap jQuery Mobile i nie chcę dołączać dwóch bibliotek.

Answer 1

przykład robocza: http://jsfiddle.net/Gajotres/K69AJ/

Przykład ten jest wykonany z wydarzeniami jQuery Telefony więc będzie pracować tylko z jQuery Mobile. Testowany na platformach Windows i Android.

Wydarzenia Vmouse zostały stworzone w celu zlikwidowania różnicy między przeglądarkami na komputery stacjonarne i urządzenia mobilne.

zauważyć również tę linię:

event.preventDefault(); 

jest to potrzebne dla platformy Android, platforma ma paskudny błąd z wykrywaniem ruchu dotykowego. Raport o błędzie: http://code.google.com/p/android/issues/detail?id=19827

var gnStartX = 0; 
var gnStartY = 0; 
var gnEndX = 0; 
var gnEndY = 0; 

$(document).on('vmousedown', function(event){ 
    gnStartX = event.pageX; 
    gnStartY = event.pageY; 
    event.preventDefault(); 
}); 

$(document).on('vmouseup', function(event){ 
    gnEndX = event.pageX; 
    gnEndY = event.pageY; 
    var distance = Math.ceil(nthroot(Math.pow((gnEndX - gnStartX),2) + Math.pow((gnEndY - gnStartY),2), 2)); 

    if(Math.abs(gnEndX - gnStartX) > Math.abs(gnEndY - gnStartY)) { 
     if(gnEndX > gnStartX) { 
      alert("Swipe Right - Distance " + distance + 'px'); 
     } else { 
      alert("Swipe Left - Distance " + distance + 'px');  
     } 
    } else { 
     if(gnEndY > gnStartY) { 
      alert("Swipe Bottom - Distance " + distance + 'px'); 
     } else { 
      alert("Swipe Top - Distance " + distance + 'px');  
     }   
    } 

    event.preventDefault();  
}); 

function nthroot(x, n) { 
    try { 
    var negate = n % 2 == 1 && x < 0; 
    if(negate) 
     x = -x; 
    var possible = Math.pow(x, 1/n); 
    n = Math.pow(possible, n); 
    if(Math.abs(x - n) < 1 && (x > 0 == n > 0)) 
     return negate ? -possible : possible; 
    } catch(e){} 
} 

Answer 2

Możesz również użyć pliku hammer.js. Oba zdarzenia - przesuń i dotknij. W hammer.js można uzyskać wskazówki i odległość. Zdarzenie tap jest również częścią nowszych wersji jQuery - nie musisz dołączać jquery-mobile tylko do zdarzenia tap.

Documentation hammer.js

Nadzieję, że pracuje dla Ciebie.

Answer 3

Dostępna jest następna wtyczka do obsługi wszystkich zdarzeń dotykowych. Proszę sprawdzić

http://quojs.tapquo.com/

https://github.com/soyjavi/quojs