编辑
基于touchemove的pageY属性判断滑动方向的思路。
我认为从长远来看，避免烦人的双击是个好主意（请参阅下面的第一个答案）。
还是有妥协的余地，但要合理得多。
我尝试了很多东西......我得到的最好结果是当我放弃在touchmove上模拟滚动时。
下面是我现在使用三个触摸事件的方法：
由于“Touch-Punch”默认情况下适用于水平滑动，因此“妥协”仅影响垂直滚动。
这是代码：
和live link 在支持触控的设备上试用。
$(function() {
var slides = $('#list1 ul').children().length;
var slideWidth = $('#list1').width();
var min = 0;
var max = -((slides - 1) * slideWidth);
$(".draggable").width(slides * slideWidth).draggable({
axis: 'x',
drag: function(event, ui) {
if (ui.position.left > min) ui.position.left = min;
if (ui.position.left < max) ui.position.left = max;
}
});
var startTouchX=0;
var startTouchY=0;
var actualPosX;
var actualPosY;
var eventCounter=0;
var directionDetermined=false;
var direction;
var thisTouchX;
var thisTouchY;
var lastTouchY;
$(document).on("touchstart", function(e) {
// Actual document position
actualPosX = $(document).scrollLeft();
actualPosY = $(document).scrollTop();
// StartTouches
startTouchX = parseInt(e.originalEvent.touches[0].pageX);
startTouchY = parseInt(e.originalEvent.touches[0].pageY);
});
$(document).on("touchmove", function(e) {
// Arbitrary considering ONLY the fourth event...
// Touchmove fires way too many times!
// We only need to determine the main direction ONCE.
// This prevents an "s" swipe from messing this code.
eventCounter++;
if(eventCounter==4 && !directionDetermined){
thisTouchX = parseInt(e.originalEvent.touches[0].pageX);
thisTouchY = parseInt(e.originalEvent.touches[0].pageY);
if ( (Math.abs(thisTouchX - startTouchX)) / Math.abs(thisTouchY - startTouchY) > 1){ //check swipe direction
// HORIZONTAL
$("#debug").html("HORIZONTAL");
directionDetermined=true;
// NO NEED here. This is re-enabled on touchend, if it has been disabled.
//$(".draggable").draggable('enable');
}
else{
// VERTICAL
$("#debug").html("VERTICAL");
directionDetermined=true;
direction="vertical";
$(".draggable").draggable('disable'); // Disable draggable.
}
}
// Getting all the Y touches...
// The "last" value will be used on touchend.
lastTouchY = parseInt(e.originalEvent.touches[0].pageY);
//$("#debug").html(lastTouchY);
});
$(document).on("touchend", function(e) {
if(direction=="vertical"){
//$("#debug").html(lastTouchY);
var thisMoveY = -parseInt(lastTouchY - startTouchY);
//$("#debug").html(thisMoveY);
var newPosY = (actualPosY + thisMoveY);
//$("#debug").html(actualPosX+ " " +newPosY);
//window.scrollTo(actualPosX, newPosY);
$("html,body").animate({ scrollTop: newPosY },400);
}
// Reset everything for a future swipe.
startTouchX=0;
startTouchY=0;
eventCounter=0;
directionDetermined=false;
direction="";
$("#debug").html("");
// Re-enable draggable.
$(".draggable").draggable('enable');
});
});
第一个答案，使用“双击”来切换方向。首先，Touch Punch 网站声明它基本上是一个 jQuery-UI hack 来处理 一些 实际未被 jQuery-UI 处理的情况...
并且可以找到Touch Punch失败的情况。
您的问题已报告给 Touch Punch 开发人员 here。
作为对此的回答（用我的话来说），他们说这不是真正的错误或问题......
但是在使用相同触摸事件的两个不同“希望”操作上的用法“冲突”。
有时滚动页面，有时拖动元素。
作为解决方案提示，他们发布了this Fiddle。
它建议找到一种在需要时禁用可拖动的方法。
但在此解决方案中，可滚动部分在可拖动元素内。
这不是你的情况。
而且您几乎所有的移动屏幕空间都用于您的可拖动元素，因此没有足够的空间来触发它们周围的draggable("disable")。
所以...我有这个想法，希望对您有所帮助。
如果您能找到一种优雅的方式来通知用户“双击”会改变移动方向。
在这里，我建议使用一个非常简单的“双箭头”来显示移动方向。
也许你会找到更好的东西。
这肯定是有点妥协的用户体验，要求他们双击...
但如果你的布局真的需要它，也许没问题。
所以在这里，我转载了你的initial issue。
这里是the fix that I suggest。
我只在三星 Galaxy S3 上尝试过，但应该可以在所有触控设备上使用。
$(function() {
var slides = $('#list1 ul').children().length;
var slideWidth = $('#list1').width();
var min = 0;
var max = -((slides - 1) * slideWidth);
$(".draggable").width(slides * slideWidth).draggable({
axis: 'x',
drag: function(event, ui) {
if (ui.position.left > min) ui.position.left = min;
if (ui.position.left < max) ui.position.left = max;
}
});
// Flag
var draggableEnabled=true;
// Find the doubletap position (to show a nice double arrow)
var tapPosition=[];
$(document).on("touchstart",function(e){
tapPosition[0] = parseInt(e.touches[0].pageX) - $(document).scrollLeft() - ($("#arrows img").width()/2);
tapPosition[1] = parseInt(e.touches[0].pageY) - $(document).scrollTop() - ($("#arrows img").width()/2);
});
Hammer(document).on("doubletap", function() {
//alert("Double tap");
draggableEnabled = !draggableEnabled; // Toggle
if(!draggableEnabled){
$(".draggable").draggable('disable'); // Disables draggable (and touch Punch)
$("#arrows img").css({
"transform":"rotate(90deg)", // Nice vertical double arrow
"top":tapPosition[1],
left:tapPosition[0]
}).fadeIn(600, function(){
$(this).fadeOut(600);
});
}else{
$(".draggable").draggable('enable'); // Enables draggable (and touch Punch)
$("#arrows img").css({
"transform":"rotate(0deg)", // Nice horizontal double arrow
"top":tapPosition[1],
left:tapPosition[0]
}).fadeIn(600, function(){
$(this).fadeOut(600);
});
}
});
});
注意它使用Hammer.js (CDN) 来检测双击。
还有一些用于 double arrow 的额外 CSS。
#arrows img{
width: 60vw;
height: 60vw;
position: fixed;
top:calc( 50vh - 60vw );
left:calc( 50vh - 60vw );
z-index:1000;
display:none;
}