JQuery-UI horizontal dragging with vertical scrolling

问题

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.

Here's a jsfiddle example (test in touch devices and try to scroll).

My draggable code:

 $(".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?

回答1:

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'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.

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.