Title says it all (or most of it). Found a similar question on stack exchange where one of the solutions was to remove overflow-x:hidden from the parent component, but unfortunately this is not an option in my case (or it is, but a shitty and complicated one).
DOM tree is dynamically generated and a bit messy so I shall not post it, but anyways the hieararchy is about:
A > B > C > draggable A > droppable
where: C has overflow-y: auto; position:relative; display: block; B display:flex;overflow:auto; A display:block; position:relative;
Here's the code for the draggable element:
ret.draggable({
containment: "window",
opacity:0.5,
revert:"invalid",
scroll:false,
snap:true,
appendTo: 'body',
zIndex:420
});
Tried using all sorts of different values for containment + with&without all the extra params all with the same result: the draggable element refuses to leave its parent (C).
Also tried removing overflow-y from C, that made the draggable move around B but it still didn't break into A (not to mention breaking functionality). Removed overflow from everywhere, which made draggable finally enter A, but fucked up everything so badly, that it's easier to hack jqueryui or write my own draggable than to make them work w/o overflow:auto.
