jQuery UI sortable - allow dropping to parent
<p>How can I make it so a jQuery UI sortable that allows dragging between different lists, will also accept being dropped on a parent?</p>

<p>See <a href="http://jsbin.com/odupi5/4" rel="nofollow">this example on JSBin</a>, where there are 3 lists, one of them empty. When dragging any list item, and dropping it on the <code>&lt;div&gt;</code> elements that wrap the lists (green), I want that item to go to the end of the contained <code>&lt;ul&gt;</code> (red). The sortable's <code>update</code> function needs to be called automatically as well. How?</p>

<pre><code>$('.sortable').sortable(
{ 
  accept: '.sortable li', 
  connectWith: '.sortable,.container',
  update: function () { alert('done with the moving'); }
});
</code></pre>

<p>My attempt (doesn't work) is to make the containing <code>&lt;div&gt;</code> a droppable target, as follows:</p>

<pre><code>$('.container').droppable(
{
  accept: '.sortable li',
  drop: function(event, ui)
  {
    ui.draggable.appendTo($(this).find('ul'));
  }
});
</code></pre>
