jQuery UI draggable阻止在移动设备上滚动

Question

我有垂直列出全屏宽度的可拖动元素.

我正在使用一个名为(jquery.ui.touch-punch)的插件来启用移动设备上的jQuery draggable.但问题是可拖动元素阻止用户滚动页面.

$('#novieList .element .content').draggable({
    axis: 'x',
    revert: function() {
        return $(this).position().left < 30;
    },
    containment: [ 0, 0, 75, 0 ],
    scope: 'element',
    scroll: false,
    delay: 300,
    drag: function(event, ui) {
        return true;
    },
    start: function(event, ui) {
        // Prevent to drag the element after open it
        var left = $(this).position().left;
        return left == 0;
    },
    stop: function(event, ui) {
        var left = $(this).position().left;
        if (left != 0) {
            $(this).offset({left: 75});
        }
        return true;
    }
});

Answer 1

我不再相信event.preventDefault()在jquery.ui.touch-punch.js作品中发表评论了。我尝试了相同的解决方案，发现 jQuery UIdraggable本身阻止了垂直滚动的默认行为 - 即使元素设置为仅沿 x 轴拖动。

对我有用的解决方案是测量光标垂直位置的任何变化，并用于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;
});

这将非常模仿触摸设备上的本机滚动。

Answer 2

我在Scrolling jQuery UI touchpunch中找到了该问题的解决方案。您必须删除event.preventDefault()第 38 行 jquery.ui.touch-punch.js 中的 a。到目前为止，我只在 Sony Xperia Z1 Compact、Android 5、Chrome 上进行了测试，但它在与此处命名的项目非常相似的项目中运行良好。