Can one element accept sortable droppables on behalf of another?

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?

From stackoverflow

• 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.

  Peeja : Brilliant! Exactly what I needed. Thanks!