gpt4 book ai didi

javascript - jQuery-UI水平拖动垂直滚动

转载 作者:行者123 更新时间:2023-11-28 03:52:17 25 4
gpt4 key购买 nike

我有一个页面,其中只有水平方向(X 轴)的可拖动 div。

当我在触摸设备中时,由于滚动和拖动之间的冲突,我无法向下滚动页面。

这是一个 jsfiddle example (在触摸设备中测试并尝试滚动)。

我的可拖动代码:

 $(".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);
}
}
}
});

我想在开始拖动之前检测用户是否垂直滚动并取消水平拖动。

请帮帮我。我怎样才能使它工作?

最佳答案

我遇到了与此类似的问题,最终找到了一个相当简单的解决方案。

在我的场景中,我有一个收件箱列表,您可以将其中的项目拖动到左侧或右侧以显示操作按钮。整个收件箱项目必须是可拖动的——因此不能使用拖动 handle 。

jQuery 的 draggable 可以防止触摸屏在 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;
});

这将非常模拟触摸设备上的 native 滚动。

关于javascript - jQuery-UI水平拖动垂直滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22775283/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com