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

I have markup that looks roughly like this:

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

The root div has overflow: auto, and width/height that may change. The columns have fixed widths and are floated left. The wrapper has a fixed width corresponding to the sum of the column widths. The end result is a set of horizontally-laid-out columns within a view tha开发者_如何学Pythont shows scroll bars when the column height or total column width exceeds its bounds.

I have applied a jQuery UI sortable to the wrapper div, so the columns inside can be sorted. This works great, except for one problem: sortable gives the element being sorted position: absolute, which apparently removes it from the normal layout. So if the column is very tall, the entire page gets a scroll bar until the element is dropped back into position.

Is there any way for the sortable helper to remain contained within the scrolling div even while sorting?

I think this might work for you.

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

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

From the docs:

"appendTo: Defines where the helper that moves with the mouse is being appended to during the drag (for example, to resolve overlap/zIndex issues)."