Is it possible to control overflow for jQuery UI Sortable helper?

Question

I have a markup that looks something like this:

<div class='root'>
    <div class='wrapper'>
        <div class='column'>
            ...
        </div>
        ...
    </div>
</div>

The root div also has a overflow: autowidth / height that can change. Columns have a fixed width and float on the left. The shell has a fixed width corresponding to the sum of the width of the columns. The end result is a set of horizontally laid out columns in a view that shows scrollbars when the height of the column or the total width of the column exceeds its border.

I applied the jQuery UI sortable for the div wrapper, so the columns inside can be sorted. This works fine, except for one problem: sortable allows you to sort an element position: absolute, which apparently removes it from the normal layout. Therefore, if the column is very high, the entire page gets a scroll bar until the element is returned to its original position.

Is there a way for the sortable helper to remain contained in the scrollable div even when sorting?

Answer 1

I think this might work for you.

You can choose where to add your sortable helper with the following:

$( ".selector" ).sortable({ appendTo: 'div.wrapper' });

From the docs:

"appendTo: , , , (, /zIndex).