jQuery UI sortable - allow dropping to parent

How can I make it so a jQuery UI sortable that allows dragging between different lists, will also accept being dropped on a parent?

See this example on JSBin, where there are 3 lists, one of them empty. When dragging any list item, and dropping it on the <div> elements that wrap the lists (green), I want that item to go to the end of the contained <ul> (red). The sortable's update function needs to be called automatically as well. How?

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

My attempt (doesn't work) is to make the containing <div> a droppable target, as follows:

$('.container').droppa开发者_如何转开发ble(
{
  accept: '.sortable li',
  drop: function(event, ui)
  {
    ui.draggable.appendTo($(this).find('ul'));
  }
});

---

You can do this by cloning the helper element and then removing the original element from the DOM.

Note, you have to clear the style attribute as it has position:absolute set for dragging and this prevents the clone from positioning correctly in the ul. Of course you could be more granular about this and add/remove classes etc.

$('.container').droppable(
{
  accept: '.sortable li',
  drop: function(event, ui)
  {
    ui.draggable.clone().attr("style", "").appendTo( $(this).find("ul") );
    ui.draggable.remove();
  }
});

Here's an updated JSBin example.