web-dev-qa-db-fra.com

Comment mettre en œuvre des gestes de balayage pour les appareils mobiles?

J'ai une application faite dans AngularJS qui a la navigation par touche fléchée pour changer de vue.

Je souhaite mettre en œuvre cette navigation à l'aide de glisser pour les appareils tactiles. J'ai essayé jGestures library mais cela ne va pas bien avec swipe . On m'a recommandé de NE PAS utiliser jquery mobile .

Existe-t-il un autre moyen de mettre en œuvre le balayage?

EDIT: Il ne détecte pas le balayage proprement. Je l'ai testé sur plusieurs appareils, y compris l'iPad, et plusieurs actions sont nécessaires pour effectuer une action (acheminement dans mon cas).

javascriptmobiletouchswipegestures
40
fotuzlab

J'ai créé cette fonction pour mes besoins.

Sentez-vous libre de l'utiliser. Fonctionne très bien sur les appareils mobiles.

function detectswipe(el,func) {
  swipe_det = new Object();
  swipe_det.sX = 0; swipe_det.sY = 0; swipe_det.eX = 0; swipe_det.eY = 0;
  var min_x = 30;  //min x swipe for horizontal swipe
  var max_x = 30;  //max x difference for vertical swipe
  var min_y = 50;  //min y swipe for vertical swipe
  var max_y = 60;  //max y difference for horizontal swipe
  var direc = "";
  ele = document.getElementById(el);
  ele.addEventListener('touchstart',function(e){
    var t = e.touches[0];
    swipe_det.sX = t.screenX; 
    swipe_det.sY = t.screenY;
  },false);
  ele.addEventListener('touchmove',function(e){
    e.preventDefault();
    var t = e.touches[0];
    swipe_det.eX = t.screenX; 
    swipe_det.eY = t.screenY;    
  },false);
  ele.addEventListener('touchend',function(e){
    //horizontal detection
    if ((((swipe_det.eX - min_x > swipe_det.sX) || (swipe_det.eX + min_x < swipe_det.sX)) && ((swipe_det.eY < swipe_det.sY + max_y) && (swipe_det.sY > swipe_det.eY - max_y) && (swipe_det.eX > 0)))) {
      if(swipe_det.eX > swipe_det.sX) direc = "r";
      else direc = "l";
    }
    //vertical detection
    else if ((((swipe_det.eY - min_y > swipe_det.sY) || (swipe_det.eY + min_y < swipe_det.sY)) && ((swipe_det.eX < swipe_det.sX + max_x) && (swipe_det.sX > swipe_det.eX - max_x) && (swipe_det.eY > 0)))) {
      if(swipe_det.eY > swipe_det.sY) direc = "d";
      else direc = "u";
    }

    if (direc != "") {
      if(typeof func == 'function') func(el,direc);
    }
    direc = "";
    swipe_det.sX = 0; swipe_det.sY = 0; swipe_det.eX = 0; swipe_det.eY = 0;
  },false);  
}

function myfunction(el,d) {
  alert("you swiped on element with id '"+el+"' to "+d+" direction");
}

Pour utiliser la fonction, utilisez-la simplement comme

detectswipe('an_element_id',myfunction);

detectswipe('an_other_element_id',my_other_function);

Si un balayage est détecté, la fonction "myfunction" est appelée avec le paramètre element-id et "l, r, u, d" (gauche, droite, haut, bas).

Exemple: http://jsfiddle.net/rvuayqeo/1/

46
EscapeNetscape

Avez-vous essayé Hammerjs? Il prend en charge les gestes de balayage en utilisant la vélocité du toucher . http://eightmedia.github.com/hammer.js/

24
Jorik

Il existe également un module AngularJS appelé angular-gestures basé sur hammer.js: https://github.com/wzr1337/angular-gestures

9
vsp

La solution la plus simple que j'ai trouvée ne nécessite pas de plugin:

document.addEventListener('touchstart', handleTouchStart, false);        
document.addEventListener('touchmove', handleTouchMove, false);
var xDown = null;                                                        
var yDown = null;  

function handleTouchStart(evt) {                                         
    xDown = evt.touches[0].clientX;                                      
    yDown = evt.touches[0].clientY;                                      
}; 

function handleTouchMove(evt) {
    if ( ! xDown || ! yDown ) {
        return;
    }
    var xUp = evt.touches[0].clientX;                                    
    var yUp = evt.touches[0].clientY;
    var xDiff = xDown - xUp;
    var yDiff = yDown - yUp;

    if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) {/*most significant*/
        if ( xDiff > 0 ) {
        /* left swipe */ 
        } else {
        /* right swipe */
        }                       
    } else {
        if ( yDiff > 0 ) {
        /* up swipe */ 
        } else { 
        /* down swipe */
        }                                                                 
    }
    /* reset values */
    xDown = null;
    yDown = null;                                             
};
8
Pixelomo

Prise sans vergogne je sais, mais vous voudrez peut-être envisager un plugin jQuery que j'ai écrit:

https://github.com/benmajor/jQuery-Mobile-Events

Il ne nécessite pas jQuery Mobile, seulement jQuery.

6
BenM

Temps de marteau!

J'ai utilisé Hammer JS et cela fonctionne avec le geste. Lire les détails ici: https://hammerjs.github.io/

C'est une bonne chose qu'il soit beaucoup plus léger et rapide que jQuery mobile. Vous pouvez aussi le tester sur leur site Web. 

1
Star

J'aime votre solution et je l'ai mise en œuvre sur mon site, avec toutefois quelques petites améliorations. Je voulais juste partager mon code:

function detectSwipe(id, f) {
    var detect = {
        startX: 0,
        startY: 0,
        endX: 0,
        endY: 0,
        minX: 30,   // min X swipe for horizontal swipe
        maxX: 30,   // max X difference for vertical swipe
        minY: 50,   // min Y swipe for vertial swipe
        maxY: 60    // max Y difference for horizontal swipe
    },
        direction = null,
        element = document.getElementById(id);

    element.addEventListener('touchstart', function (event) {
        var touch = event.touches[0];
        detect.startX = touch.screenX;
        detect.startY = touch.screenY;
    });

    element.addEventListener('touchmove', function (event) {
        event.preventDefault();
        var touch = event.touches[0];
        detect.endX = touch.screenX;
        detect.endY = touch.screenY;
    });

    element.addEventListener('touchend', function (event) {
        if (
            // Horizontal move.
            (Math.abs(detect.endX - detect.startX) > detect.minX)
                && (Math.abs(detect.endY - detect.startY) < detect.maxY)
        ) {
            direction = (detect.endX > detect.startX) ? 'right' : 'left';
        } else if (
            // Vertical move.
            (Math.abs(detect.endY - detect.startY) > detect.minY)
                && (Math.abs(detect.endX - detect.startX) < detect.maxX)
        ) {
            direction = (detect.endY > detect.startY) ? 'down' : 'up';
        }

        if ((direction !== null) && (typeof f === 'function')) {
            f(element, direction);
        }
    });
}

Utilisez-le comme:

detectSwipe('an_element_id', myfunction);

Ou

detectSwipe('another_element_id', my_other_function);

Si un balayage est détecté, la fonction myfunction est appelée avec le paramètre id-élément et 'left', 'right', 'up' ou 'down'.

0
Konrad Holl