I write a userscript for a website, and the script includes a jQuery UI draggable. Greatly simplified, the site has two rows, and each row has two divs placed horizontally.
The site layout previously used two columns with inner divs instead of rows. The draggable was constrained to the right column's parent, which is exactly what we wanted. Now, however, there's no way to constrain to the right "column" because that column no longer exists in the DOM.
Is there a way to fluidly contain the draggable div to the right column of divs without the old parent element? I can add elements to the DOM (or do whatever) if needed, we have the full power of jQuery and jQuery UI available. I know it would be possible to use a droppable on the top right div, but from what I understand that would cause the draggable to snap between the two. If that's the only option then I'll do that, but if there's another method I would love to see it.
FIDDLE
<div id="outercontainer">
<div id="toprow">
<div id="topleft"></div>
<div id="topright"></div>
</div>
<div id="bottomrow">
<div id="bottomleft"></div>
<div id="bottomright"></div>
</div>
</div>
<div id="dragme"></div>