jQuery UI Сортируемый - Div не перетаскивается, когда страница прокручивается

Question

Заранее спасибо, что взглянули на мой вопрос.

Я создаю веб-сайт, где у меня есть список элементов div, которые можно отсортировать по оси Y с использованием сортируемого пользовательского интерфейса jQuery.
Поскольку я хочу, чтобы это работало на мобильных устройствах с использованием сенсорного ввода, мне пришлось добавить небольшой хак, чтобы убедиться, что пользовательский интерфейс jQuery можно использовать (поскольку в настоящее время он не поддерживает сенсорные события).
Взлом называется JQuery UI Touch Punch.
Сайт: jQuery UI Touch Punch.
GitHub: JQuery UI сенсорный удар.

Теперь приходит моя проблема. Иногда список становится настолько большим, что веб-сайт становится прокручиваемым, и когда сайт прокручивается, я не могу правильно перетаскивать элементы, поскольку, когда я пытаюсь перетащить div, он просто прокручивает страницу. Единственный способ, которым я могу перетащить его, это когда я дважды коснусь элемента, а затем перетащу его.

Но это действительно не то, что я хочу, так как это очень утомительно и неестественно.

Вопрос теперь в том, есть ли способ отключить прокрутку при попытке перетащить один из элементов из перетаскиваемого набора. Я пытался добавить overflow-y: hidden на кран или добавление touch-action : none, К сожалению, это не сработало.

РЕЗЮМЕ
Что у меня есть: в настоящее время я могу перетаскивать и сортировать список Divs с помощью сенсорного устройства, используя сенсорный удар jQuery UI и jquery UI.
Проблема: список становится настолько большим, что сайт можно прокручивать, что отключает перетаскивание одним касанием, которое мне нужно дважды нажать, чтобы перетащить элемент.
Что я хочу: я хочу иметь возможность перетаскивать элементы (без двойного нажатия), даже когда у меня есть полоса прокрутки.

Как я могу понять такое поведение / с чего мне начать? Любые советы и решения приветствуются.

И последнее, но не менее важное, вот моя скрипка.

РЕДАКТИРОВАТЬ:

Я использую:
IE 11
JQuery версия 1.11.1
jQuery-ui версия 1.11.4

Answer 1

Попробуйте заменить (рекомендуется) библиотеку Touch Punch (или в дополнение к ней) на следующий фрагмент JS и вызов init() функция на $(document).ready();:

• Обратите внимание, что вы можете комментировать стили #wrapperони были установлены только для тестирования переполнения.
• В идеале вы должны оставить некоторое пространство вне перетаскиваемых объектов, чтобы прокручивать их без нежелательного перетаскивания.

Фрагмент ниже:

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

---> Скрипка с фрагментом, заменяющим сенсорный удар <---

---> Скрипка с фрагментом + сенсорный удар <---

(Оба протестированы в мобильном Safari и Chrome, перетаскивание достигается при первом нажатии)

Answer 2

Попробуйте добавить эти строки в файл js библиотеки Touch Punch.

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

Включите вышеуказанные строки.