Can one element accept sortable droppables on behalf of another?

Question

I have two connected sortable lists, but each one is in a larger block element. Something like:

<div class="items_box">
    <ul class="items">
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
    </ul>
</div>

<div class="items_box">
    <ul class="items">
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
    </ul>
</div>

With this Javascript:

$(".items").sortable({connectWith: [".items"]});

The .items_box divs are taller then the lists. I'd like to make the entirety of each div accept items on behalf of its list. How would I do that?

Answer 1

The solution is to make the container the sortable, and change the .items property to look for your items within the list.

$('.items_box').sortable({ 
  connectWith: '.items_box', 
  items: '> .items > li' 
});

I have posted a working example for you (although there are issues with dragging into an empty list, but that's a new problem ;)

Note also that connectWith no longer allows arrays of selectors. Seperate them with commas instead.