jquery-ui sortable connected lists with hidden overflow

Question

I have two fixed hight divs each containing a sortable list which are connected to each other. Is there a way to hide the overflow while still having the lists connected? Eg if the overflow is set to hidden then the li doesn't show when it is dragged outside of the div.

I know a possible solution would be to calculate the maximum number of li that the div can contain and dynamically add/remove elements based on the number of visible elements, but I was wondering if there was a better solution?

Answer 1

You should be able to fix this by using the appendTo option , which will tell it where to attach the helper object to in the DOM. The default is to use parent which means the helper that's being dragged is inside your overflow: hidden div. Changing it to, for example, body should fix it for you. Ie:

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

Answer 2

Have a look at containment . It defines a bounding box that the sortable items are constrained to while dragging.

http://api.jqueryui.com/sortable/#option-containment