jQuery UI 可拖动防止在移动设备上滚动答案

【问题标题】：jQuery UI draggable prevents scrolling on mobilejQuery UI 可拖动防止在移动设备上滚动
【发布时间】：2015-02-07 00:34:54
【问题描述】：

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

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

$('#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;
    }
});

【问题讨论】：

有没有发现解决这个问题的方法？我遇到了完全相同的问题。
一种解决方案可能是向固定在屏幕顶部和/或底部的界面添加向上和向下按钮。

标签： javascript jquery cordova jquery-ui jquery-mobile

【解决方案1】：

我认为在jquery.ui.touch-punch.js 中注释掉event.preventDefault() 不再有效。我尝试了相同的解决方案，发现 jQuery UI draggable 本身阻止了垂直滚动的默认行为——即使元素设置为仅沿 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;
});

这将非常模仿触摸设备上的原生滚动。

【讨论】：

这是一个很好的解决方案，你认为它可以变得更流畅吗？我在诺基亚 Lumia 中测试过，垂直滚动不流畅，很抽搐。
是的，它并不完美，但它可能与 JavaScript 修复一样好。我没有在诺基亚 Lumia 上进行过测试，但我已经在 S7、iPhone 6 和 iPod Touch（第 6 代）上进行了测试——这些设备上的抽搐感很小，除非你正在寻找它，否则不会明显。这些手机有基于 Webkit 的浏览器。 Lumia 是 Windows 手机吗？您可以尝试原生平滑滚动（参见blog.hospodarets.com/native_smooth_scrolling）。但是，它不适用于所有移动浏览器，我并没有真正注意到启用与禁用之间的区别。
我发现较新版本的 jQuery UI 的一个问题是他们将可拖动元素上的 CSS 设置为 touch-action: none，这会阻止默认操作。尝试将其更改为 auto，这是默认设置。

【解决方案2】：

我在Scrolling jQuery UI touch punch 找到了该问题的解决方案。您必须在第 38 行的 jquery.ui.touch-punch.js 中删除 event.preventDefault()。到目前为止，我只在 Sony Xperia Z1 Compact、Android 5、Chrome 上进行了测试，但它在非常类似于一个在这里命名的。

【讨论】：

唯一的问题是，删除线后水平滚动不是很流畅。（诺基亚 Lumia）
这在我的三星 S8+ 上确实有效，但我使用的是拖放功能，所以当我尝试移动项目时列表会滚动...！！！！

【解决方案3】：

我的问题是当我的 div 可拖动时我可以在移动设备上滚动，因为 Jquery UI 的 CSS 将以下代码设置为 none，因此通过将更改置于初始位置来恢复更改，一切都会再次正常运行！

.ui-draggable-handle {-ms-touch-action:initial!important;touch-action:initial!important}

【讨论】：