Samodzielna metoda "dotykowa" jQuery?

Question

Tak więc, zamierzam zaimplementować możliwość wtyczki, którą napisałem, aby czytać dotykowe "przesuwanie" z urządzenia obsługującego dotyk, takiego jak iPhone, iPad lub Android.

Czy coś tam jest? Nie szukam czegoś tak pełnego, jak jQtouch, choć rozważałem inżynierię wsteczną kodu, który byłby mi potrzebny.

Wszelkie sugestie dotyczące najlepszego sposobu podejścia do tego problemu? Fragment kodu jest już dostępny?

Dodatek: Z perspektywy czasu zdaję sobie sprawę, że rozwiązanie nie będzie ściśle związane z jQuery, ponieważ jestem pewien, że nie ma żadnych wbudowanych metod, aby temu zaradzić. Spodziewałbym się standardowego JavaScriptu, który znalazłby się w odpowiedzi.

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

i to w jaki sposób można wykryć 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

Jest też jQuery.touchwipe na http://www.netcu.de/jquery-touchwipe-iphone-ipad-library

Answer 3

Najmniejszy i najbardziej jQuery-owskiej rozwiązanie jest tutaj: https://github.com/eikes/jquery.swipe-events.js