Solo swipeone funziona con jGestures

Question

Sto provando a implementare touchevens con jGestures. swipeone funziona bene ma qualsiasi altra cosa (swipeleft, swiperight, ecc.) non sta sparando.

<div id="wrap" style="height:500px; width:500px; background: blue;"> 

    </div> 
    <script type="text/javascript"> 
     $('#wrap').bind('swipeleft', function(){ 
      alert("test"); 
     }); 
    </script> 

Questa è solo una pagina di prova che ho fatto. In realtà stava lavorando a un certo punto nel mio progetto principale, ma sembrava essersi fermato senza motivo, nemmeno quando tornavo a una versione precedente. Ho provato una versione diversa di jGestures senza fortuna.

Answer 1

SwipeLeft, SwipeRight, -Up e -Down sono poco implementati. Vengono attivati ​​solo se si rimane ESATTAMENTE sull'asse in cui è stato avviato l'evento tattile. Ad esempio, SwipeRight funziona solo se il dito si sposta da (X, Y) (120, 0) a (250, 0).

Se le coordinate Y di Start e Endpoint differiscono, non funzionerà.

jGestures.js (linea di ca. 1095) dovrebbe meglio essere simile a questo (leggibile): Si potrebbe provare

/** 
* U Up, LU LeftUp, RU RightUp, etc. 
* 
* \U|U/ 
* LU\|/RU 
*L---+---R 
* LD/|\RD 
* /D|D\ 
* 
*/ 
if (_bHasTouches && _bHasMoved === true && _bHasSwipeGesture===true) { 
    _bIsSwipe = true; 
    var deltaX = _oDetails.delta[0].lastX; 
    var deltaY = _oDetails.delta[0].lastY; 
    var hor = ver = ''; 
    if (deltaX > 0) { // right 
     hor = 'right'; 
     if (deltaY > 0) { 
      ver = 'down' 
     } else { 
      ver = 'up'; 
     } 

     if (Math.abs(deltaY) < deltaX * 0.3) { 
      ver = ''; 
     } else if (Math.abs(deltaY) >= deltaX * 2.2) { 
      hor = ''; 
     } 
    } else { // left 
     hor = 'left'; 
     if (deltaY > 0) { 
      ver = 'down' 
     } else { 
      ver = 'up'; 
     } 

     if (Math.abs(deltaY) < Math.abs(deltaX) * 0.3) { 
      ver = ''; 
     } else if (Math.abs(deltaY) > Math.abs(deltaX) * 2.2) { 
      hor = ''; 
     } 
    } 
    // (_oDetails.delta[0].lastX < 0) -> 'left' 
    // (_oDetails.delta[0].lastY > 0) -> 'down' 
    // (_oDetails.delta[0].lastY < 0) -> 'up' 
    // alert('function swipe_' + hor + '_' + ver); 

    _oDetails.type = ['swipe', hor, ver].join(''); 
    _$element.triggerHandler(_oDetails.type, _oDetails); 
} 

Answer 2

entrambi:

$('#wrap').bind('swipeleftup', function(){ 
    doSomething(); 
}); 

$('#wrap').bind('swipeleftdown', function(){ 
    doSomething(); 
}); 

e dimenticare 'swipeleft' come è abbastanza difficile da attivare, come menzionato prima.

Answer 3

Stavo solo cercando la stessa cosa e capito che si può provare tutto nella stessa funzione in questo modo:

$("#wrap").on('swipeleft swipeleftup swipeleftdown', function(e){ 
    doSomething(); 
}); 

così come l'equivalente per il diritto:

$("#wrap").on('swiperight swiperightup swiperightdown', function(e){ 
    doSomething(); 
}); 

È può elencare più eventi insieme al metodo on.

Answer 4

provare questo:

$('#wrap').bind('swipeone', function (event, obj) { 
    var direction=obj.description.split(":")[2] 
    if(direction=="left"){ 
     doSomething(); 
    } 
}); 

Answer 5

sto usando la soluzione di Willian El-Turk in questo modo:

// jGestures http://stackoverflow.com/a/14403116/796538 
$('.slides').bind('swipeone', function (event, obj) { 
    var direction=obj.description.split(":")[2] 
    if (direction=="left"){ 
     //alert("left"); 
    } else if (direction=="right"){ 
     //alert("right"); 
    } 
}); 

Ottima soluzione, ad eccezione di quanto eseguito non appena c'è movimento da sinistra a destra è davvero sensibile anche con più di un colpo verticale. sarebbe bello avere una distanza minima di scorrimento sull'asse x. Qualcosa di simile:

if (direction=="left" && distance>=50px){ 

Tranne che non sono sicuro di come ... Non esitate a modificare questo!

Modifica - È possibile controllare a distanza (asse x) come questo, per me funziona:

$('.slides').bind('swipeone', function (event, obj) { 

    var xMovement = Math.abs(obj.delta[0].lastX); 
    var direction=obj.description.split(":")[2] 

    //I think 75 treshold is good enough. You can change this. 

    if(xMovement >= 75) { 
     //continue to event 
     //ONLY x axis swipe here. (left-right) 

     if (direction=="left"){ 
      //alert("left"); 
     } else if (direction=="right"){ 
      //alert("right"); 
     } 
    } 
} 

Answer 6

questo è già risposto qui:

stackoverflow about jGesture swipe events

Il trucco è:

… .bind('swipeone swiperight', … 

È necessario associarlo a entrambi gli eventi. solo swiperight non funzionerà.mi ha portato 3 ore per capirlo: D

migliore, Rico

Answer 7

sostituire i casi on line 1326 nella versione 0.90.1 con questo codice

   if (_bHasTouches && _bHasMoved === true && _bHasSwipeGesture===true) { 
        _bIsSwipe  = true; 
        _oDetails.type = 'swipe'; 
        _vLimit  = $(window).height()/4; 
        _wLimit  = $(window).width()/4; 
        _sMoveY  = _oDetails.delta[0].lastY; 
        _sMoveX  = _oDetails.delta[0].lastX; 
        _sMoveYCompare = _sMoveY.toString().replace('-',''); 
        _sMoveXCompare = _sMoveX.toString().replace('-',''); 

        if(_sMoveX < 0){ 
         if(_oDetails.delta[0].lastY < _vLimit) { 
          if(_sMoveYCompare < _vLimit) { 
           _oDetails.type += 'left'; 
          } 
         } 
        }else if(_sMoveX > 0){ 
         if(_sMoveYCompare < _vLimit) { 
          _oDetails.type += 'right' 
         } 
        }else{ 
         _oDetails.type += ''; 
        } 

        if(_sMoveY < 0){ 
         if(_sMoveXCompare < _wLimit) { 
          _oDetails.type += 'up'  
         } 
        }else if(_sMoveY > 0){ 
         if(_sMoveXCompare < _wLimit) { 
          _oDetails.type += 'down' 
         } 
        }else{ 
         _oDetails.type += ''; 
        } 
        // alert(_oDetails.type); 
        _$element.triggerHandler(_oDetails.type, _oDetails); 
       }