jQuery UI Draggable inside overflow-y: auto; div issue

Question

Я создаю интерфейс, используя jQuery UI drag and drop.

У меня есть серия контейнеров flexbox, одна из которых содержит список, в котором элементы можно перетаскивать и опускать друг на друга.

Этот список может быть длиннее доступной высоты страницы, и в этом случае к контейнеру прилагается overflow-y: auto;, чтобы содержимое контейнера можно было прокручивать.

Корпус интерфейса не должен прокручиваться и установлен на 100% высота.

Когда элемент .draggable перетаскивается мимо нижней части контейнера, прокручивает div в соответствии с UI Docs scroll option.

Проблема заключается в том, что при прокрутке, кажется, добавляется смещение к helper, поэтому helper удаляется из-под курсора.

Это JS Fiddle показывает проблему: https://jsfiddle.net/1oqo9tjh/

Удаление overflow-y: auto; исправляет проблему, но ломает мой интерфейс - так что мне нужно, чтобы сохранить его.

Solutions пытался от прибегая к помощи и читать другие переполнения стека ответов:

• Использование helper: clone;
• Использование position: absolute; помощника
• Использование scroll: true опции
• Использование refreshPositions: true опции

Возможное решение :

• Изменение ui.position значения как часть onDrag обратного вызова - это не похоже на работу для меня.

Любые идеи? Заранее спасибо.

Answer 1

попробовать:

в CSS-файле:

body { 
    overflow-y: scroll;  
} 

в JS-файла:

$('body').css('overflowY', 'visible');  
    $("#my_element").draggable(); 

это работает для меня, когда я использую:

$("#my_element").sortable();