problem with draggable/sortable list in tabs

[badtwin]

When two unsorted lists (the first is .draggable(), the second is .sortable()) are connected, the drag/drop-effect only works, when an element of the target-list (the one with .sortable()) is dragged and dropped before once. else no elements from the first list (with .draggable()) can be dropped in the target-list.

When those lists are outside of the tabs, or on the first tab everything works like a charm.

Demo: ​http://jsbin.com/izamo4/3

Tested with chrome and firefox

[aheywood]

I'm experiencing this problem as well. I also found the problem occurring when the connected draggable and sortable are not inside a tab page as well.

I have a work-around that fixes this issue for me. In the start event of my draggable, I call the refresh method of the sortable.

$( ".draggable-class-name").draggable({
    connectToSortable: ".sortable-class-name,
    // other options here
    start: function(event, ui) {
        $( ".sortable-class-name" ).sortable("refresh");
    }
});

Hope this helps someone else struggling with this issue.

[Corey Frang]

​http://jsbin.com/izamo4/9/ - Added the "expected" behavior on tab 0 to further show the "broken" behavior on tab 0...

[aheywood]

This problem appears to be fixed in Jquery UI 1.8.11. See here for an example: ​http://jsbin.com/izamo4/10/ and here for the 1.8.11 release notes: ​http://jqueryui.com/docs/Changelog/1.8.11

[rdworth]

Duplicate of #5563.