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 theonDrag
callback - this does not seem to work for me.
Any ideas? Thanks in advance.