web-dev-qa-db-ja.com

モバイルデバイスにスワイプジェスチャを実装する方法

私はAngularJSで作られたアプリケーションを持っていますが、これにはビューを切り替えるための矢印キーナビゲーションがあります。

タッチデバイスのスワイプを使用してこのナビゲーションを実装します。 jGestures ライブラリを試しましたが、スワイプではうまくいきません。 jquery mobile を使用しないことをお勧めします。

スワイプを実装する他の方法はありますか？

編集：スワイプをきれいに検出しません。 iPadを含む複数のデバイスでテストし、アクションを実行するには複数回のスワイプが必要です（私の場合はルーティング）。

javascriptmobiletouchswipegestures
43
fotuzlab

私は自分のニーズに合わせてこの関数を作成しました。

気軽に使用してください。モバイルデバイスで最適に動作します。

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

関数を使用するには、次のように使用します

detectswipe('an_element_id',myfunction);

detectswipe('an_other_element_id',my_other_function);

スワイプが検出された場合、関数「myfunction」がパラメーターelement-idおよび「l、r、u、d」（左、右、上、下）で呼び出されます。

例： http://jsfiddle.net/rvuayqeo/1/

58
EscapeNetscape

Hammerjsを試しましたか？タッチの速度を使用してスワイプジェスチャーをサポートします。 http://eightmedia.github.com/hammer.js/

26
Jorik

Hammer.jsに基づいた、angular-gesturesと呼ばれるAngularJSモジュールもあります。 https://github.com/wzr1337/angular-gestures

9
vsp

プラグインを必要としない最も簡単なソリューション：

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

私が知っている恥知らずなプラグインですが、私が書いたjQueryプラグインを検討したいと思うかもしれません。

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

JQuery Mobileは不要で、jQueryのみが必要です。

6
BenM

私はあなたのソリューションが好きで、それを私のサイトに実装しました-しかし、少し改善されています。私のコードを共有したいだけです：

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

次のように使用します。

detectSwipe('an_element_id', myfunction);

または

detectSwipe('another_element_id', my_other_function);

スワイプが検出された場合、関数myfunctionがパラメーターelement-idと'left'、'right'、'up'または'down'で呼び出されます。

2
Konrad Holl

ハンマータイム！

Hammer JSを使用しましたが、ジェスチャーで動作します。詳細はこちらから https://hammerjs.github.io/

JQuery mobileよりもはるかに軽量で高速であることは良いことです。 Webサイトでもテストできます。

2
Star