CODEWITHSUNDEEP
jqueryjquery-plugins
Evanss
Evanss

Reputation: 23583

jQuery Touchwipe - disable default scrolling for 1 axis only

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

With preventDefaultEvents: true its possible to dissable the default dragging behavour on an iPhone. However what I need is to dissable the default behavious in 1 axis only. I need users to be able to drag to scroll up and down, but dragging from left to right needs to be disabled and my function will fire instead. Thanks

Upvotes: 5

Views: 5090

Answers (1)

Benoît Pointet
Benoît Pointet

Reputation: 898

I had the same need and extended the touchwipe plugin to pass the event to the wipeLeft, wipeRight, wipeUp and wipeDown callbacks. That allows me to set preventDefaultEvents: false in config and then in my specific callbacks if needed, do first thing: e.preventDefault();.

I sent modifications to plugin author.

The modified plugin:

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

Upvotes: 12

Related Questions