Método jQuery independiente "táctil"?

Question

Por lo tanto, estoy buscando implementar la capacidad de un complemento que escribí para leer un toque "deslizar" desde un dispositivo de Internet con capacidad táctil, como un iPhone, iPad o Android.

¿Hay algo por ahí? No estoy buscando algo tan completo como jQtouch, aunque estaba considerando la ingeniería inversa del código que necesitaría.

¿Alguna sugerencia sobre la mejor manera de abordar esto? ¿Un fragmento de código ya está disponible?

Adición: Me doy cuenta en retrospectiva que la solución no será estrictamente jQuery, ya que estoy bastante seguro de que no hay ningún método incorporado para manejar esto. Esperaría que el Javascript estándar se encuentre en la respuesta.

Answer 1

(function($) { 
$.fn.swipe = function(options) { 
    // Default thresholds & swipe functions 
    var defaults = { 
     threshold: { 
      x: 30, 
      y: 10 
     }, 
     swipeLeft: function() { alert('swiped left') }, 
     swipeRight: function() { alert('swiped right') }, 
     preventDefaultEvents: true 
    }; 

    var options = $.extend(defaults, options); 

    if (!this) return false; 

    return this.each(function() { 

     var me = $(this) 

     // Private variables for each element 
     var originalCoord = { x: 0, y: 0 } 
     var finalCoord = { x: 0, y: 0 } 

     // Screen touched, store the original coordinate 
     function touchStart(event) { 
      console.log('Starting swipe gesture...') 
      originalCoord.x = event.targetTouches[0].pageX 
      originalCoord.y = event.targetTouches[0].pageY 
     } 

     // Store coordinates as finger is swiping 
     function touchMove(event) { 
      if (defaults.preventDefaultEvents) 
       event.preventDefault(); 
      finalCoord.x = event.targetTouches[0].pageX // Updated X,Y coordinates 
      finalCoord.y = event.targetTouches[0].pageY 
     } 

     // Done Swiping 
     // Swipe should only be on X axis, ignore if swipe on Y axis 
     // Calculate if the swipe was left or right 
     function touchEnd(event) { 
      console.log('Ending swipe gesture...') 
      var changeY = originalCoord.y - finalCoord.y 
      if(changeY < defaults.threshold.y && changeY > (defaults.threshold.y*-1)) { 
       changeX = originalCoord.x - finalCoord.x 

       if(changeX > defaults.threshold.x) { 
        defaults.swipeLeft() 
       } 
       if(changeX < (defaults.threshold.x*-1)) { 
        defaults.swipeRight() 
       } 
      } 
     } 

     // Swipe was canceled 
     function touchCancel(event) { 
      console.log('Canceling swipe gesture...') 
     } 

     // Add gestures to all swipable areas 
     this.addEventListener("touchstart", touchStart, false); 
     this.addEventListener("touchmove", touchMove, false); 
     this.addEventListener("touchend", touchEnd, false); 
     this.addEventListener("touchcancel", touchCancel, false); 

    }); 
}; 
})(jQuery); 


$('.swipe').swipe({ 
swipeLeft: function() { $('#someDiv').fadeIn() }, 
swipeRight: function() { $('#someDiv').fadeOut() }, 
}) 

y esta es la forma de detectar iPhone

if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) { 
    if (document.cookie.indexOf("iphone_redirect=false") == -1) window.location = "path to iphone page"; 
} 

Answer 2

También hay jQuery.touchwipe en http://www.netcu.de/jquery-touchwipe-iphone-ipad-library

Answer 3

La solución más pequeña y jQuery-esque está aquí: https://github.com/eikes/jquery.swipe-events.js