jQuery Touchwipe - отключить прокрутку по умолчанию только для 1 оси - PullRequest
5 голосов
/ 19 марта 2012

Я использую плагин jQuery Touchwipe: http://www.netcu.de/jquery-touchwipe-iphone-ipad-library

С помощью protectDefaultEvents: true можно отключить режим перетаскивания по умолчанию на iPhone. Однако то, что мне нужно, это отключить поведение по умолчанию только на 1 оси. Мне нужно, чтобы пользователи могли перетаскивать для прокрутки вверх и вниз, но перетаскивание слева направо должно быть отключено, и вместо этого сработает моя функция. Спасибо

1 Ответ

12 голосов
/ 14 апреля 2012

У меня была такая же необходимость, и я расширил плагин 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);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...