it-swarm.com.de

Wie implementiere ich Wischgesten für mobile Geräte?

Ich habe eine Anwendung in AngularJS mit der Pfeiltasten-Navigation zum Wechseln der Ansichten.

Ich möchte diese Navigation mit Streichen für Touch-Geräte implementieren. Ich habe versucht, jGestures library zu verwenden, aber es passt nicht zu swipe . Ich habe empfohlen, jquery mobile NICHT zu verwenden.

Gibt es eine andere Möglichkeit, Swipe zu implementieren?

BEARBEITEN: Der Wischvorgang wird nicht sauber erkannt. Ich habe es auf mehreren Geräten getestet, darunter auch auf einem iPad, und es sind mehrere Aktionen erforderlich, um eine Aktion auszuführen (Routing in meinem Fall).

40
fotuzlab

Ich habe diese Funktion für meine Bedürfnisse gemacht.

Fühlen Sie sich frei, es zu benutzen. Funktioniert hervorragend auf mobilen Geräten.

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");
}

Um die Funktion zu nutzen, benutzen Sie sie einfach wie

detectswipe('an_element_id',myfunction);

detectswipe('an_other_element_id',my_other_function);

Wird ein Swipe erkannt, wird die Funktion "myfunction" mit dem Parameter element-id und "l, r, u, d" (links, rechts, auf, ab) aufgerufen.

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

46
EscapeNetscape

Hast du Hammerjs ausprobiert? Es unterstützt Wischgesten, indem die Geschwindigkeit der Berührung verwendet wird . http://eightmedia.github.com/hammer.js/

24
Jorik

Es gibt auch ein AngularJS-Modul namens Winkelgesten, das auf hammer.js basiert: https://github.com/wzr1337/angular-gestures

9
vsp

Die einfachste Lösung, die ich gefunden habe, die kein Plugin benötigt:

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

Schamloser Plug, den ich kenne, aber Sie möchten vielleicht ein jQuery-Plugin betrachten, das ich geschrieben habe:

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

Es ist kein jQuery Mobile erforderlich, nur jQuery.

6
BenM

Hammerzeit!

Ich habe Hammer JS verwendet und es funktioniert mit Gesten. Lesen Sie die Details von hier: https://hammerjs.github.io/

Gut, dass es viel leichter und schneller ist als jQuery Mobile. Sie können es auch auf ihrer Website testen. 

1
Star

Ich mag Ihre Lösung und habe sie auf meiner Website implementiert - allerdings mit ein paar kleinen Verbesserungen. Ich wollte nur meinen Code teilen:

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);
        }
    });
}

Verwenden Sie es wie:

detectSwipe('an_element_id', myfunction);

Oder

detectSwipe('another_element_id', my_other_function);

Wird ein Swipe erkannt, wird die Funktion myfunction mit dem Parameter element-id und 'left', 'right', 'up' oder 'down' aufgerufen.

0
Konrad Holl