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

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

jquery ipad

jQuery在iPhone/iPad/触摸屏上拖动与滑动手势逻辑,jquery,ipad,swipe,jquery-ui-draggable,Jquery,Ipad,Swipe,Jquery Ui Draggable,这真是个麻烦事基本上，我需要一些逻辑来决定这一点：如果用户开始滑动手势，但在一定时间（1秒）内未完成阈值距离，则开始拖动手势，滑动手势被取消这有可能吗我是否应该尝试自定义一个刷卡插件还有，现在触摸插件的标准是什么（jQuery Mobile、各种插件或触摸事件到jQuery事件的映射对不起，我不够聪明，无法解决这个问题：（所以我对这个问题做了进一步的研究我修改了一个滑动脚本，添加了距离阈值和时间阈值因此，要执行刷卡，您必须触摸移动超过150像素，并且时间必须低于600毫秒该逻辑

这真是个麻烦事

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

如果用户开始滑动手势，但在一定时间（1秒）内未完成阈值距离，则开始拖动手势，滑动手势被取消

这有可能吗

我是否应该尝试自定义一个刷卡插件

还有，现在触摸插件的标准是什么（jQuery Mobile、各种插件或触摸事件到jQuery事件的映射

对不起，我不够聪明，无法解决这个问题：（

所以我对这个问题做了进一步的研究

我修改了一个滑动脚本，添加了距离阈值和时间阈值

因此，要执行刷卡，您必须触摸移动超过150像素，并且时间必须低于600毫秒

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

无论发生什么情况，拖动仍将开始，但使用新脚本时会更加平滑

触摸事件映射到鼠标事件，如下所示：

以下是刷卡脚本：

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

（函数（$）{
$.fn.swipe=功能（设置）{
变量配置={
左：函数（）{}，
右：函数（）{}，
默认值：true
};
if（设置）$.extend（配置，设置）；
这个。每个（函数（）{
var-startX；
无功电流x；
var startTime=false；
var isMoving=假；
功能启动（e）{
如果（！isMoving&&e.touchs.length>0）{
if（config.preventDefault）{
e、 预防默认值（）；
}
startTime=新日期（）.getTime（）；
startX=e.touchs[0].pageX；
currentX=startX；
isMoving=真；
此.addEventListener（'touchmove'，onTouchMove，false）；
}
} 
移动功能（e）{
if（config.preventDefault）{
e、 预防默认值（）；
}
如果（正在移动）{
currentX=e.Touchs[0].pageX；
}
}        
函数onTouchEnd（）{
此.removeEventListener（'touchmove'，onTouchMove）；
var endTime=new Date（）.getTime（）；
变量时间=结束时间-开始时间；
var endX=电流x；
var distanceX=endX-startX；
如果（数学绝对值（距离x）>150和时间<600）{
如果（距离X<0）{
config.left（）；
}
否则{
config.right（）；
}
重置（）；
}
否则{
重置（）；
}
}
函数重置（）{
startX=null；
currentX=null；
startDate=假；
isMoving=假；
}               
此.addEventListener（'touchstart'，onTouchStart，false）；
此.addEventListener（'touchend'，onTouchEnd，false）；
});
归还这个；
};
})（jQuery）；

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

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

$（文档）。轻扫（{右：函数（）{$（'#上一个'）。单击（）；}，左：函数（）{$（'#下一个'）。单击（）；}）；

所以我对这个问题有了进一步的了解