jQueryUI and problem with sortable events

I'm working with the 'Connect list trough tabs' demo. I modified the code a little bi开发者_如何学Got. I added the 'foo' class to the tabs-1 and tabs-2 elements. I also added the following script:

$(".foo ul").sortable({
    stop: function (event, ui) {
            var tabId = $(this).attr('id');
            var elementIndex = ui.item.index();
            alert('tab id: ' + tabId + ' | element index: ' + elementIndex);
}});

It works super fine when I change the sort order of elements inside same tab, but I have the problem when I drop the element from the first tab to the second tab (or vice versa), because the element is firstly placed on the first position in tab1 (tab id = sortable1, element index = 0), and after that it is dropped to the second tab on the last position. The problem is because the sortable event is not fired for the second time.

I'm missing something but don't know what :)

Any help would be greatly appreciated.

Thank you!

EDIT:

Demo can be found on the following link: http://jqueryui.com/demos/sortable/#connect-lists-through-tabs

---

Did you ever find an answer to this? Because I'm currently having the same problem - trying a range of ways around it, but so far to no success.

EDIT

Scratch that, just found what I think is the most efficient way to resolve. Bind the event "DOMNodeInserted" to the <ul> list class you're using, and you can test the list item by searching its current DOM position:

$(".connectedSortable").bind("DOMNodeInserted", function() {
$('#tabs').find('li#staff-'+currentStaffId).each(function() {
listDeptID = $(this).parent().parent().attr('id');
listDeptID = listDeptID.split('-');
listDeptID = listDeptID[1];
....

In this example of mine, I have my list items with the id of staff-x with the id of that staff member, so the find returns one array element, and runs quite efficiently.

HTH

Jester.