JQuery UI draggable prevents scrolling on mobile devices

Question

I have drag-and-drop items with full screen width, indicated vertically.

I am using a plugin called (jquery.ui.touch-punch) to enable jQuery for drag and drop on a mobile device. But the problem is that draggable items do not allow the user to scroll through the page.

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

I don't think the event.preventDefault() comment in jquery.ui.touch-punch.js works longer. I tried the same solution and found that jQuery UI draggable blocked the default vertical scroll behavior - even if the element is set to move only along the x axis.

The solution that worked for me was to measure any changes in the vertical position of the cursor 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 look exactly like scrolling on a touch device.

Answer 2

I found a solution to this problem in Scrolling jQuery UI touch punch . You should remove event.preventDefault() in jquery.ui.touch-punch.js on line 38. So far I only tested on Sony Xperia Z1 Compact, Android 5, Chrome, but it works very well in a project very similar to one of which is named here.

Answer 3

I had a problem that I could scroll on the mobile phone when my div was draggable, since the CSS of JQuery UI had the following code that does not matter, therefore, returning the changes, putting them back to the original, everything worked again!

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