jQuery Touchwipe - desactivar por defecto desplazamiento de 1 solo eje

Question

Im usando el plugin de jQuery Touchwipe: http://www.netcu.de/jquery-touchwipe-iphone-ipad-library

Con preventDefaultEvents: cierto que su posible dissable el valor por defecto arrastrando behavour en un iPhone. Sin embargo, lo que necesito es cambiar el comportamiento predeterminado en solo 1 eje. Necesito que los usuarios puedan arrastrar para desplazarse hacia arriba y hacia abajo, pero arrastrar de izquierda a derecha debe deshabilitarse y mi función se activará en su lugar. Gracias

Answer 1

Tuve la misma necesidad y extendí el complemento de touchwipe para pasar el evento a las devoluciones de llamada wipeLeft, wipeRight, wipeUp y wipeDown. Eso me permite configurar preventDefaultEvents: false en config y luego en mis devoluciones de llamada específicas si es necesario, haga lo primero: e.preventDefault();.

Envié modificaciones al autor del complemento.

el plugin modificado:

(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);