JQuery UI Sortable - Div not dragging when page scrolls

Question

Thanks in advance for watching my question.

I am creating a site on which I have a list of divs that are sorted on the y axis using jQuery UIs sortable.
Since I want this to be done on mobile devices using touch, I had to add a bit of hacking to make sure that the jQuery user interface can be used (as it currently does not support touch events).
The hack is called jQuery UI touch punch.
Website: jQuery UI touch punch .
GitHub: jQuery UI touch punch .

Now my problem. Sometimes the list becomes so large that the website will scroll, and when the website scrolls, I cannot drag the items correctly, because when I try to drag the div, it just scrolls the page. The only way I can drag it is when I double click on the item and then drag it.

But this is really not what I want, as it is really tedious to use and unnatural.

The question is, is there a way to turn off scrolling when trying to drag one of the elements from the dragged set. I tried adding overflow-y: hidden when clicked or adding touch-action : none . Unfortunately, this did not seem to work.

SUMMARY
What I have: Now I can drag and sort a list of partitions with a touch device using jQuery UI and jquery UI touch punch.
Problem: The list becomes so large that the site scrolls, disables one-click drag and drop. I need to double-click and drag an item.
What I want:. I want to (without double-clicking), even if I have a scroll bar.

How could I implement this behavior / where to start? Any tips and solutions are appreciated.

Last but not least, this is my FIDDLE .

EDIT:

I use:
IE 11
JQuery version 1.11.1
jQuery-ui version 1.11.4

Answer 1

Try either replacing (recommended) the touch toolbar (or in addition to it) with the following JS fragment and calling the init() function on $(document).ready(); :

• Please note that you can comment on styles in #wrapper , they were installed only for overflow testing.
• Ideally, you will leave some space from draggable items to scroll without unwanted drag.

Below is a snippet:

 $(document).ready(function() { init(); $("#myContainer").sortable({ //your code }) }); function touchHandler(event) { var touch = event.changedTouches[0]; var simulatedEvent = document.createEvent("MouseEvent"); simulatedEvent.initMouseEvent({ touchstart: "mousedown", touchmove: "mousemove", touchend: "mouseup" }[event.type], true, true, window, 1, touch.screenX, touch.screenY, touch.clientX, touch.clientY, false, false, false, false, 0, null); touch.target.dispatchEvent(simulatedEvent); event.preventDefault(); } function init() { document.addEventListener("touchstart", touchHandler, true); document.addEventListener("touchmove", touchHandler, true); document.addEventListener("touchend", touchHandler, true); document.addEventListener("touchcancel", touchHandler, true); } 

---> Screenshot with fragment replacing touch punch <---

---> Screenshot with fragment + touch punch <---

(Both are tested on mobile safaris and chrome, dragging is carried out on the 1st crane)

Answer 2

Try adding these lines to your js file jb files.

 function simulateMouseEvent(event, simulatedType) { // Ignore multi-touch events > if (event.originalEvent.touches.length > 1) { > return; > } > > var touch = event.originalEvent.changedTouches[0], > simulatedEvent = document.createEvent('MouseEvents'); > > if ($(touch.target).is("select")) { > event.stopPropagation(); > } else { > event.preventDefault(); > } ` 

Include the above lines.