Metodo "touch" standalone jQuery?

Question

Quindi, sto cercando di implementare la possibilità di un plug-in che ho scritto per leggere un tocco "swipe" da un dispositivo Internet touch-capable, come un iPhone, un iPad o un androide.

C'è qualcosa là fuori? Non sto cercando qualcosa di pieno come jQtouch, anche se stavo considerando il reverse engineering il codice di cui avrei bisogno.

Qualche suggerimento sul modo migliore per avvicinarsi a questo? Un frammento di codice già disponibile?

Addendum: Mi rendo conto che con il senno di poi la soluzione non sarà strettamente jQuery, poiché sono abbastanza sicuro che non ci siano metodi incorporati per gestirlo. Mi aspetterei che Javascript standard si trovi nella risposta.

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() }, 
}) 

e questo è il modo in cui si verifichi 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

C'è anche jQuery.touchwipe a http://www.netcu.de/jquery-touchwipe-iphone-ipad-library

Answer 3

La soluzione più piccola e jQuery-esque è qui: https://github.com/eikes/jquery.swipe-events.js