Как реализовать жесты для мобильных устройств?

Ответ 1

Я сделал эту функцию для своих нужд.

Не стесняйтесь использовать его. Отлично работает на мобильных устройствах.

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" вызывается с параметром-id и "l, r, u, d" (слева, справа, вверх, вниз).

Пример: http://jsfiddle.net/rvuayqeo/1/

Ответ 2

Вы пробовали Hammerjs? Он поддерживает салфетки, используя скорость прикосновения. http://eightmedia.github.com/hammer.js/

Ответ 3

Существует также модуль AngularJS с именем angular -gestures, основанный на hammer.js: https://github.com/wzr1337/angular-gestures

Ответ 4

Бесстыдный плагин, который я знаю, но вы можете рассмотреть плагин jQuery, который я написал:

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

Он не требует jQuery Mobile, только jQuery.

Ответ 5

Самое простое решение, которое я нашел, которое не требует плагина, ответить givanse на аналогичный вопрос

Ответ 6

Время молотка!

Я использовал Hammer JS, и он работает с жестом. Подробнее читайте здесь: https://hammerjs.github.io/

Хорошо, что он намного более легкий и быстрый, чем jQuery mobile. Вы можете проверить его и на своем сайте.