jQuery UI draggable可防止在移动设备上滚动

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

我正在使用一个名为（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

我不相信在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; }); 

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

Answer 2

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

Answer 3

我遇到的问题是，当我的div可以拖动时，我可以在移动设备上滚动，因为Jquery UI的CSS将以下代码设置为无，所以通过将更改放回到初始化的一切再次工作来恢复更改！

.ui-draggable-handle {-ms-touch-action：initial！important; touch-action：initial！important}