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

Maybe something with `containment`, like `containment: "window"`. Is that what you are asking about? — Twisty, Jan 13 '17 at 21:31
Have you seen this? https://stackoverflow.com/questions/34027761/jquery-ui-sortable-hold-and-drag-for-mobile — Serg Chernata, Jan 24 '17 at 15:34
Surely you're not saying you want to disable scrolling completely? How do you think the user should access things that are off the bottom of the screen? — David Knipe, Jan 25 '17 at 08:56
[fiddle](https://jsfiddle.net/u67sun5d/1/) working fine with drag items with single click. I have checked in android device. — Bharatsing Parmar, Jan 25 '17 at 09:04

Syden · Answer 1 · 2017-01-27T14:13:04.490

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)

Hey thank you for your solution and sorry for the late response. It seems to work in chrome but i get following Error when i touch the screen: `Uncaught TypeError: Failed to execute 'initMouseEvent' on 'MouseEvent': parameter 4 is not of type Window` — TheWandererr, Jan 31 '17 at 07:13
Not getting the error in the Internet Explorer 11 which i have to use, but in which your solution is not working. Unfortunately i didnt mention that in my question. Any idea on how to make it work in the Internet Explorer. It seems that the scroll has a higher priority or something. I gonna give you the bounty nonetheless when no other answers is provided. — TheWandererr, Jan 31 '17 at 07:23
Thanks a lot . This solution did work for me. One update - I had to remove preventDefault form TouchHandler because it was creating other complexity with clearing canvas and all. — Neerav Patel, Mar 07 '19 at 15:36

score 1 · Answer 2 · answered Jan 25 '17 at 08:04

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.

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

2 Answers2