So erhalten Sie Richtung und Entfernung mit jQuery Mobiles Swipe-Ereignis

Question

Ist es möglich, die Richtung und die Entfernung in einer Rückruffunktion zu erhalten, wenn jQuery Mobiles Swipe-Ereignis verwendet? Ich habe nichts darüber in der official docs gefunden.

TouchSwipe ist eine gute Alternative, aber ich brauche die tap Ereignisformular jQuery Mobile und ich möchte nicht zwei Bibliotheken enthalten.

Answer 1

Arbeitsbeispiel: http://jsfiddle.net/Gajotres/K69AJ/

Dieses Beispiel ist mit jQuery Mobile Ereignissen gemacht, so wird es nur mit jQuery Mobile arbeiten. Getestet auf Windows- und Android-Plattform.

Vmouse-Ereignisse werden erstellt, um den Unterschied zwischen Desktop- und mobilen Browsern zu überbrücken.

Beachten Sie auch diese Zeile:

event.preventDefault(); 

Es ist für Android-Plattform benötigt wird, Plattform hat einen fiesen Fehler mit Touch-Bewegungserkennung. Fehlerbericht: 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

Sie können auch hammer.js verwenden. Es gibt beide Ereignisse - wischen und tippen Sie auf. In hammer.js ist es möglich, die Richtungen und Entfernungen zu ermitteln. Das Tippereignis ist auch Teil der neueren jQuery-Versionen - Sie müssen jquery-mobile nicht nur für das Tippereignis einschließen.

Documentation hammer.js

Hoffe, dass es für Sie arbeitet.

Answer 3

Es gibt ein weiteres Plugin, das alle Berührungsereignisse verarbeiten kann. Bitte beachten Sie auch

http://quojs.tapquo.com/

https://github.com/soyjavi/quojs