在iPhone/iPad/触摸屏上jQuery拖拽与滑动手势逻辑

Question

这是一个真正的难题。

基本上，我需要一些逻辑来决定这一点：

如果用户开始滑动手势，但在一定时间内(1秒)没有完成阈值距离。然后开始拖拽手势，并且滑动手势被删除。

有没有可能..。

我是不是应该试着定制一个swipe插件...

另外，现在触摸插件的标准是什么(jQuery移动、各种插件或触摸事件到jQuery事件的映射……

对不起，我还不够聪明，不能解决这个问题：

Answer 1

所以我在这个问题上走得更远了一点。

我修改了一个卷帘脚本，添加了一个距离阈值和一个时间阈值。

因此，要执行一次滑动，你必须触摸移动超过150px，并且它必须在600ms以下。

该逻辑仅在touchend/ mouseup事件之后触发。

不管怎样，拖动仍然会开始，但使用新脚本时，它的效果要流畅得多。

使用- jquery.ui.touch.js将触摸事件映射到鼠标事件

下面是swipe脚本：

    (function($) {

$.fn.swipe = function(settings) {

var config = {

    left: function() { },
    right: function() { },
    preventDefault: true

};

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

this.each(function() {

    var startX;
    var currentX;
    var startTime = false;  
    var isMoving = false;

    function onTouchStart(e) {

        if (!isMoving && e.touches.length > 0) {

            if(config.preventDefault) {

                e.preventDefault();

            }

            startTime = new Date().getTime();

            startX = e.touches[0].pageX;
            currentX = startX;
            isMoving = true;

            this.addEventListener('touchmove', onTouchMove, false);

        }

    } 

    function onTouchMove(e) {

        if(config.preventDefault) {

            e.preventDefault();

        }

        if (isMoving) {

            currentX = e.touches[0].pageX;

        }

    }        

    function onTouchEnd() {

        this.removeEventListener('touchmove', onTouchMove);

        var endTime = new Date().getTime();
        var time = endTime - startTime;

        var endX = currentX;
        var distanceX = endX - startX;

        if(Math.abs(distanceX) > 150 && time < 600) {

            if(distanceX < 0) {

                config.left();

            }

            else {

                config.right();

            }

            reset();

        }

        else {      

            reset();
        }
    }

    function reset() {

        startX = null;
        currentX = null;
        startDate = false;
        isMoving = false;

    }               

    this.addEventListener('touchstart', onTouchStart, false);
    this.addEventListener('touchend', onTouchEnd, false);

});

return this;

};

})(jQuery);

下面是如何在页面上使用它：

<script>$(document).swipe({ right:function(){ $('#previous').click(); }, left:function(){$('#next').click(); } });</script>