我创建了codepen我想要实现的目标。
我正在使用几个水平可拖动项目创建时间轴概述。在jquery和jquery-ui旁边，我还使用jquery-ui-touch-punch在移动设备上制作所有可能的手势。在桌面上一切正常，但不是在移动设备上。
不幸的是，$(".timeLineItemContainer").draggable({ ... });非常具有侵略性，它还会吞下我的垂直滚动行为，导致我触摸其中一项时无法向下滚动在移动设备上的页面。
不知何故，我需要启用或禁用项目的拖动功能，具体取决于我的滚动操作的方向。当我在event.preventDefault();中停用jquery-ui-touch-punch.js时，它向下滚动，只有click和horizontal move无法正常工作（移动设备上的水平滑动指的是历史记录。 goback，我想阻止，因为我需要它来做我的手势。）
总结一下：我想要的是防止默认行为，垂直滚动除外。
有关如何实现这一目标的任何想法？或者还有其他想法/方法来实现这一目标吗？
Here's a link for a mobile version
HTML （只是一个简单的多个项目列表）
<div class="timeLineItemContainer">
<div class="subItemMiddleContainer">
<div class="timeLineHeader">
<div>
<span>A TITLE</span>
</div>
<div>
<div>Some other text text</div>
</div>
</div>
</div>
<div class="subItemBottomContainer">
<ul>
<li class="static">
<div class="timeLineRight timeLineInfo">
<span class="info">Thu 12 March</span>
</div>
</li>
<li class="static">
<div class="timeLineRight timeLineInfo">
<span class="label">some additional text</span>
<span class="info time strikethrough">bla</span>
<div class="info time attention">
<span>yup</span>
</div>
</div>
</li>
<li class="toggable closed">
<div class="timeLineRight timeLineInfo">
<span class="label">Text</span>
<span class="info">content</span>
</div>
</li>
<li class="toggable closed">
<div class="timeLineRight timeLineInfo">
<span class="label">title</span>
<span class="info">value</span>
</div>
</li>
<li class="toggable closed">
<div class="timeLineRight timeLineInfo">
<span class="label">Another title</span>
<span class="info">another value</span>
</div>
</li>
<li class="static">
<div class="timeLineRight timeLineInfo">
<span class="label">always visible</span>
<span class="info time strikethrough">just because</span>
<div class="info attention">
<span>attention!</span>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="timeLineItemContainer">
<div class="subItemMiddleContainer">
<div class="timeLineLeft">
<div class="timeLinePipe"></div>
</div>
<div class="timeLineHeader">
<div>
<span>Some other text</span>
</div>
<div>
<div>Ola!</div>
</div>
</div>
</div>
<div class="subItemBottomContainer">
<ul>
<li class="static">
<div class="timeLineRight timeLineInfo">
<span class="info">A date</span>
</div>
</li>
<li class="toggable closed">
<div class="timeLineRight timeLineInfo">
<span class="label">label</span>
<span class="info">value</span>
</div>
</li>
<li class="toggable closed">
<div class="timeLineRight timeLineInfo">
<span class="label">anotehr label</span>
<span class="info time">different value</span>
</div>
</li>
</ul>
</div>
</div>
<div class="timeLineItemContainer">
<div class="subItemMiddleContainer">
<div class="timeLineHeader">
<div>
<span>A TITLE</span>
</div>
<div>
<div>Some other text text</div>
</div>
</div>
</div>
<div class="subItemBottomContainer">
<ul>
<li class="static">
<div class="timeLineRight timeLineInfo">
<span class="info">Thu 12 March</span>
</div>
</li>
<li class="static">
<div class="timeLineRight timeLineInfo">
<span class="label">some additional text</span>
<span class="info time strikethrough">bla</span>
<div class="info time attention">
<span>yup</span>
</div>
</div>
</li>
<li class="toggable closed">
<div class="timeLineRight timeLineInfo">
<span class="label">Text</span>
<span class="info">content</span>
</div>
</li>
<li class="toggable closed">
<div class="timeLineRight timeLineInfo">
<span class="label">title</span>
<span class="info">value</span>
</div>
</li>
<li class="toggable closed">
<div class="timeLineRight timeLineInfo">
<span class="label">Another title</span>
<span class="info">another value</span>
</div>
</li>
<li class="static">
<div class="timeLineRight timeLineInfo">
<span class="label">always visible</span>
<span class="info time strikethrough">just because</span>
<div class="info attention">
<span>attention!</span>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="timeLineItemContainer">
<div class="subItemMiddleContainer">
<div class="timeLineLeft">
<div class="timeLinePipe"></div>
</div>
<div class="timeLineHeader">
<div>
<span>Some other text</span>
</div>
<div>
<div>Ola!</div>
</div>
</div>
</div>
<div class="subItemBottomContainer">
<ul>
<li class="static">
<div class="timeLineRight timeLineInfo">
<span class="info">A date</span>
</div>
</li>
<li class="toggable closed">
<div class="timeLineRight timeLineInfo">
<span class="label">label</span>
<span class="info">value</span>
</div>
</li>
<li class="toggable closed">
<div class="timeLineRight timeLineInfo">
<span class="label">anotehr label</span>
<span class="info time">different value</span>
</div>
</li>
</ul>
</div>
</div>
的Javascript
var sw = screen.width;
var thresholdPercentageSwipeTimeLineItem = 15;
var thresholdPercentageSwipeDetailScreen = 10;
$(".timeLineItemContainer").draggable({
scroll: false,
axis: "x",
drag: function (event, ui) {
if (ui.position.left < 0) {
ui.position.left = 0;
}
else {
if (calculateOffsetPercentage(ui.position.left) > thresholdPercentageSwipeTimeLineItem) {
return false;
};
}
},
stop: function (event, ui) {
$(this).animate({
left: 0,
}, {
duration: 200,
queue: false
});
}
}).click(function () {
var nextObjs = $(this).toggleClass("visible").find(".toggable");
$.each(nextObjs, function () {
$(this).stop().animate({
height: "toggle",
queue: false
}).toggleClass("closed");
});
});
function calculateOffsetPercentage(screenValue) {
return (100 / (sw / screenValue));
}
答案 0 :(得分：0)
Nailed it！
首先想一想，$(".timeLineItemContainer").draggable({ ... });似乎正在消耗所有事件，但实际上jquery-ui-touch-punch.js阻止了所有事件。
jquery-ui-touch-punch.js的工作方式是阻止所有触摸事件结果执行默认行为。因此，我稍微调整了jquery-ui-touch-punch.js以获得正确的行为。
我从event.preventDefault()函数中删除了simulateMouseEvent()。
我将触摸的开始存储在mouseProto._touchStart事件
tsx = event.originalEvent.touches[0].clientX;
tsy = event.originalEvent.touches[0].clientY;
我在mouseProto._touchMove事件中添加了一个条件，以检查我是否在水平或垂直方向上滚动。在水平方向的情况下，我正在执行event.preventDefault()。为此，您可以使用：
// Higher then 1 means a (more) horizontal direction
// Lower then 1 means a (more) vertical direction
// 1 is an exact 45 degrees swipe, which will be handled as a vertical swipe
if ((Math.abs(CurrentX - StartX)) / Math.abs(CurrentY - StartY) > 1) {
event.preventDefault();
}
mouseProto._touchStart和mouseProto._touchMove函数的结果如下所示：
var tsx = 0,
tsy = 0,
currentx = 0,
currenty = 0;
mouseProto._touchStart = function (event) {
var self = this;
tsx = event.originalEvent.touches[0].clientX;
tsy = event.originalEvent.touches[0].clientY;
// Ignore the event if another widget is already being handled
if (touchHandled || !self._mouseCapture(event.originalEvent.changedTouches[0])) {
return;
}
// Set the flag to prevent other widgets from inheriting the touch event
touchHandled = true;
// Track movement to determine if interaction was a click
self._touchMoved = false;
//// Simulate the mouseover event
simulateMouseEvent(event, 'mouseover');
//// Simulate the mousemove event
simulateMouseEvent(event, 'mousemove');
// Simulate the mousedown event
simulateMouseEvent(event, 'mousedown');
};
mouseProto._touchMove = function (event) {
// Ignore event if not handled
if (!touchHandled) {
return;
}
// Higher then 1 means a (more) horizontal direction
// Lower then 1 means a (more) vertical direction
// 1 is an exact 45 degrees swipe, which will be handled as a vertical swipe
if ((Math.abs(event.originalEvent.changedTouches[0].clientX - tsx)) / Math.abs(event.originalEvent.changedTouches[0].clientY - tsy) > 1) {
event.preventDefault();
}
// Interaction was not a click
this._touchMoved = true;
// Simulate the mousemove event
simulateMouseEvent(event, 'mousemove');
};
答案 1 :(得分：0)
我尝试了OPs解决方案，但我认为自上次发布此帖子以来jQuery UI draggable可能已经发生了变化。在我的测试中，即使在完全删除jquery-ui-touch-punch.js后，我发现jQuery UI draggable仍在使用拖动事件。我不想深入研究jQuery UI代码并分叉库，所以我设计了一个相当简单的替代方案。
在我的场景中，我有一个收件箱列表，其中的项目可以向左或向右拖动以显示操作按钮。整个收件箱项目必须是可拖动的 - 因此不能使用拖动句柄。
如果触摸是在draggable元素内启动的，jQuery的draggable会阻止触摸屏上的垂直滚动。因此，如果屏幕上装满了可拖动的收件箱项目，那么用户就会陷入困境 - 无法向上或向下滚动。
对我有用的解决方案是测量光标垂直位置的任何变化，并使用window.scrollBy手动滚动窗口相同的数量：
var firstY = null;
var lastY = null;
var currentY = null;
var vertScroll = false;
var initAdjustment = 0;
// record the initial position of the cursor on start of the touch
jqDraggableItem.on("touchstart", function(event) {
lastY = currentY = firstY = event.originalEvent.touches[0].pageY;
});
// fires whenever the cursor moves
jqDraggableItem.on("touchmove", function(event) {
currentY = event.originalEvent.touches[0].pageY;
var adjustment = lastY-currentY;
// Mimic native vertical scrolling where scrolling only starts after the
// cursor has moved up or down from its original position by ~30 pixels.
if (vertScroll == false && Math.abs(currentY-firstY) > 30) {
vertScroll = true;
initAdjustment = currentY-firstY;
}
// only apply the adjustment if the user has met the threshold for vertical scrolling
if (vertScroll == true) {
window.scrollBy(0,adjustment + initAdjustment);
lastY = currentY + adjustment;
}
});
// when the user lifts their finger, they will again need to meet the
// threshold before vertical scrolling starts.
jqDraggableItem.on("touchend", function(event) {
vertScroll = false;
});
这将非常类似于触摸设备上的原生滚动。