Jquery UI Sortable + Toggle Problem

I'm trying to implement a simple connected sortable whose display can be toggled by the user.

$('#toggle').click(function(){
    $('#content').toggle();
});

$('#target').sortable();
$('#source div').draggable({
    connectToSortable: '#target',
    helper: 'clone'
});

I'm running into an issue here. If the sortable (target) is collapsed, and a drag operation is performed, the sortable stops working.

See http://jsfiddle.net/9hGrs/12/

1. Click on the toggle button to hide the sortable
2. Drag any item from the source to anywhere on the page, and release it (i.e. this simulates an invalid drop)
3. Click on the toggle button again to show the sortable
4. Now, when you try to drag/drop an item from the source into the sortable, it doesn't accept the draggable.

Any idea what I'm doing wrong h开发者_运维技巧ere? I'd appreciate any help. Thanks!

---

You need to use the invalid option, and disable and enable the target when you hide:

$('#toggle').click(function(){
    if($('#content').is(":visible")) {
      $( "#target" ).sortable( "option", "disabled", true );
      $("#content").hide();
} else {
      $( "#target" ).sortable( "option", "disabled", false );
      $("#content").show();            
    }

});

$('#target').sortable();
$('#source div').draggable({
    connectToSortable: '#target',
    helper: 'clone',
    revert: 'invalid'
});

A modified JSFiddle showing this working.

---

This problem doesn't occur with jquery 1.6.1 / jquery-ui 1.8.14.

Updated fiddle: http://jsfiddle.net/9hGrs/16/