jQueryのTouchwipe - jQueryのTouchwipeプラグインを使用して1つの軸だけ

Question

イムのためのデフォルトのスクロールを無効にします。 preventDefaultEventsでhttp://www.netcu.de/jquery-touchwipe-iphone-ipad-library

：真の可能iPhone上behavourドラッグデフォルトをdissableします。しかし、私が必要とするのは、1軸だけのデフォルトの行動を無視することです。私は、上下にスクロールするためにドラッグすることができるようにユーザーが必要ですが、左から右にドラッグすることは無効にする必要があり、代わりに私の機能が起動します。ありがとう

Answer 1

私は同じ必要性を持ち、touchwipeプラグインを拡張してイベントをwipeLeft、wipeRight、wipeUp、wipeDownコールバックに渡しました。それで私は設定でpreventDefaultEvents: falseを設定し、必要に応じて私の具体的なコールバックで、最初に行うことができます：e.preventDefault();。

私はプラグインの著者に変更を送った。

修正プラグイン：

(function($) { 
$.fn.touchwipe = function(settings) { 
    var config = { 
      min_move_x: 20, 
      min_move_y: 20, 
      wipeLeft: function(e) { }, 
      wipeRight: function(e) { }, 
      wipeUp: function(e) { }, 
      wipeDown: function(e) { }, 
      preventDefaultEvents: true 
    }; 

    if (settings) $.extend(config, settings); 

    this.each(function() { 
     var startX; 
     var startY; 
     var isMoving = false; 

     function cancelTouch() { 
      this.removeEventListener('touchmove', onTouchMove); 
      startX = null; 
      isMoving = false; 
     } 

     function onTouchMove(e) { 
      if(config.preventDefaultEvents) { 
       e.preventDefault(); 
      } 
      if(isMoving) { 
       var x = e.touches[0].pageX; 
       var y = e.touches[0].pageY; 
       var dx = startX - x; 
       var dy = startY - y; 
       if(Math.abs(dx) >= config.min_move_x) { 
        cancelTouch(); 
        if(dx > 0) { 
         config.wipeLeft(e); 
        } 
        else { 
         config.wipeRight(e); 
        } 
       } 
       else if(Math.abs(dy) >= config.min_move_y) { 
         cancelTouch(); 
         if(dy > 0) { 
          config.wipeDown(e); 
         } 
         else { 
          config.wipeUp(e); 
         } 
        } 
      } 
     } 

     function onTouchStart(e) 
     { 
      if (e.touches.length == 1) { 
       startX = e.touches[0].pageX; 
       startY = e.touches[0].pageY; 
       isMoving = true; 
       this.addEventListener('touchmove', onTouchMove, false); 
      } 
     } 
     if ('ontouchstart' in document.documentElement) { 
      this.addEventListener('touchstart', onTouchStart, false); 
     } 
    }); 

    return this; 
}; 

})(jQuery);