Javascript JQuery UI水平拖动和垂直滚动

我有一个只在水平方向（在X轴上）充满可拖动div的页面

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

下面是一个（在触摸设备中测试并尝试滚动）

我的可拖动代码：

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

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

---

请帮帮我。我如何才能做到这一点？

我使用jquery.ui.touch-punch.js，这对我来说很有效，第38行：

event.preventDefault(); 

---

我使用jquery.ui.touch-punch.js，第38行：

event.preventDefault(); 

---

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

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

如果触摸是在

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

---

这将非常类似于触摸设备上的本机滚动。

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

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

如果触摸是在

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

---

这将非常类似于触摸设备上的本机滚动。

我建议使用浮动按钮上下移动。我建议使用浮动按钮上下移动。请在回答中提供代码的主要部分。万一将来这个链接断了，你的答案就没用了。谢谢，请在回答中提供代码的主要部分。万一将来这个链接断了，你的答案就没用了。谢谢