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

Question

I am building an interface using jQuery UI drag and drop.

I have a series of flexbox containers, one of which contains a list in which items can be dragged and dropped on top of each other.

The list can be longer than the available height of the page, in which case the container has overflow-y: auto; applied to it so that the contents of the container will can be scrolled.

The body of the interface should not scroll and is set to 100% height.

When a .draggable item is dragged past the bottom of the container the div scrolls as per the UI Docs scroll option .

The issue is that when the scroll occurs it seems to add the offset to the helper so the helper moves away from under the cursor.

This JS Fiddle shows the problem: https://jsfiddle.net/1oqo9tjh/

Removing overflow-y: auto; fixes the problem but breaks my interface - so I need to keep it.

Solutions tried from googling and reading other stack overflow answers:

• Using helper: clone;
• Using position: absolute; helper
• Using the scroll: true option
• Using refreshPositions: true option

Possible solution:

• Modifying the ui.position values as part of the onDrag callback - this does not seem to work for me.

Any ideas? Thanks in advance.

Answer 1

to try:

in css-file:

body {
  overflow-y: scroll;      
}

in js-file:

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

it works for me, when I use:

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