jQuery UI Sortable -- Div is not draggable when the page is scrollable

Question

In advance thanks for taking a look at my question.

I am creating a website where i have a list of divs which are sortable on the Y-axis using jQuery UIs sortable.
Since i want this to run on mobile devices using touch i had to add a little hack to make sure that jQuery UI is usable( since 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 comes my problem. Sometimes the list gets so big that the website will get scrollable and when the site is scrollable i cannot properly drag the items since when i try to drag a div it just scrolls the page. The only way i can drag it is when i double tap the item and then drag it.

But this is really not what i want since it is really tedious to use and unnatural.

The question now is, is there a way to disable the scrolling when trying to drag one of the items from the draggable set. I tried adding overflow-y: hidden on tap or adding touch-action : none. Unfortunately this didn't seem to work.

SUMMARY
What i have: I can currently drag and sort a List of Divs with a touch device using jQuery UI and jquery UI touch punch.
The Problem: The list will get so big that the site is scrollable which disables the dragging with a single tap i need to double tap to drag the item.
What i want: I want to be able to drag the items(without double tapping) even when i have a scrollbar.

How could i realize such behaviour / with what should i start? Any tips and solutions are appreciated.

Last but not least here is my FIDDLE.

EDIT:

I am using:
IE 11
jQuery version 1.11.1
jQuery-ui version 1.11.4

Answer 1

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

• Note you can comment styles on #wrapper, they were set just for overflow testing.
• Ideally you would leave some space out of draggable items in order to scroll without undesired dragging.

Snippet below:

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

---> Fiddle with snippet replacing touch punch <---

---> Fiddle with snippet + touch punch <---

(Both tested in mobile safari & chrome, drag is achieved on 1st tap)

Answer 2

Try adding these lines to your touch punch library js file.

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.