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屋！