JQuery-UI水平拖动与垂直滚动 [英] JQuery-UI horizontal dragging with vertical scrolling
问题描述
我的页面中只有水平(在X轴上)的可拖动div。
I have a page full of draggable divs only in horizontal (on axis X).
当我在触摸设备中时,我无法向下滚动页面,滚动和拖动之间的冲突。
When I'm in a touch device I can't scroll down the page, due conflicts between scroll and drag.
这是一个 jsfiddle示例(在触摸设备中测试并尝试滚动)。
Here's a jsfiddle example (test in touch devices and try to scroll).
我的可拖动代码:
$(".cell").draggable({
axis: "x",
drag: function (event, ui) {
var size = $(".cell").width();
if (ui.offset.left > size - em(4)) {
ui.position.left = size - em(4);
}
},
start: function (event, ui) {
if (initialPosition == null) {
initialPosition = ui.position.left;
}
$(".cell").not(ui.helper).each(function () {
var pos = $(this).position().left;
if (pos > 0) {
$(this).animate({
left: initialPosition
}, 200, null);
}
});
},
stop: function (event, ui) {
var size = $(".cell").width();
if (ui.position.left > initialPosition) {
if (ui.position.left - initialPosition >= size / 3) {
ui.helper.animate({
left: size - em(4)
}, 200, null);
} else {
ui.helper.animate({
left: initialPosition
}, 200, null);
}
}
}
});
我想检测用户是否在开始拖动之前垂直滚动并取消
水平拖动。
I want to detect if the user is scrolling vertically before start dragging and cancel the horizontal dragging.
请帮帮我。我怎样才能使这个工作?
Help me, please. How can I make this work?
推荐答案
我遇到了类似这个的问题,最终找到了一个相当简单的解决方案。
I had a problem similar to this one and eventually found a fairly simple solution.
在我的场景中,我有一个收件箱列表,其中的项目可以向左或向右拖动以显示操作按钮。整个收件箱项目必须是可拖动的 - 因此不能使用拖动句柄。
In my scenario I had an inbox list whose items that you could drag to the left or right to expose action buttons. The entire inbox item must be draggable -- so the use of a drag handle was not an option.
jQuery的可拖动
如果在 draggable
元素内启动了触摸,则会阻止触摸屏上的垂直滚动。因此,如果屏幕上装满了可拖动的收件箱项目,那么用户就会陷入困境 - 无法向上或向下滚动。
jQuery's draggable
prevents vertical scrolling on touch screens if the touch was initiated inside a draggable
element. So if the screen was filled with draggable inbox items, then the user would become trapped -- unable to scroll up or down.
对我有用的解决方案是测量光标垂直位置的任何变化,并使用 window.scrollBy
手动滚动窗口相同的数量:
The solution that worked for me was to measure any change in the cursor's vertical position and use window.scrollBy
to manually scroll the window by the same amount:
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;
});
这将非常模仿触控设备上的原生滚动。
This will closely mimic native scrolling on a touch device.
这篇关于JQuery-UI水平拖动与垂直滚动的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!