jquery-ui sortable/draggable order: strange behaviour

Question

I found a strange behavior when dragging a li from a ul to another:

print screen

As you can see, "Item 1" appears as the first item of the ul, but the firebug inspector show it as the second. This occurs when i take the .draggable li and release on a .sortable (not always!). At some moment I need to check the order of the li, obviously the order returned is the one shown on the firebug inspector and not the one shown in the page.

Edit: jsFiddle

The js:

$('ul.draggable li').draggable({ 
    connectToSortable: ".sortable", 
    helper: function(event) {
        return $('<span class="t3Helper" />')
                .text($(this).text());
      },
    revert: "invalid",
    cursorAt: { top: 0, left: 0 }
});

$('ul.sortable').sortable({ 
    placeholder: "sortable-placeholder",
    helper: "clone",

    connectWith: ".sortable",
    cursorAt: { top: 0, left: 0 },
    update: function() { 
        if($('.draggable').children().length == 0 && last) {
            $('.draggable').after('<button type="button" class="btn btn-primary btn-large pull-right" id="btnVerify">Verifica</button>');
            $('#btnVerify').on('click', checkClosure);
            $('.draggable').hide();
            last = false;
        }
    },
    receive: function (event, ui) { // add this handler
        if(!ui.sender.hasClass("sortable")) {
            $(this).data().sortable.currentItem.attr("id", ui.sender.attr('id'));
            $(ui.item).detach(); // remove original item
        }
    }
});

The relevant html (edit):

<div class="main" id="t3_container" style="display: block;">
    <div id="exercise">
        <div id="table" style="display: block;">
            <table>
                <thead>
                    <tr class="exerciseTitle">
                        <th colspan="2">Title</th>
                        <th class="originalList">&nbsp;</th>
                    </tr>
                    <tr class="groupTitle">
                        <th class="g0">Col1</th>
                        <th class="g1">Col2</th>
                        <th class="originalList">&nbsp;</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="group">
                            <ul id="g0" class="sortable ui-sortable"></ul>
                        </td>
                        <td class="group" style="border-right: none;">
                            <ul id="g1" class="sortable ui-sortable"></ul>
                        </td>
                        <td>
                            <ul class="draggable">
                                <li id="s28.001" class="v138 g1 ui-draggable" style="display: list-item;">Item1</li>
                                <li id="s24.003" class="v132 g1 ui-draggable" style="display: list-item;">Item2</li>
                                <li id="s10.203" class="v69 g0 ui-draggable" style="display: list-item;">Item3</li>
                                <li id="s24.403" class="v134 g1 ui-draggable" style="display: list-item;">Item4</li>
                                <li id="s10.103" class="v68 g0 ui-draggable" style="display: list-item;">Item5</li>
                                <li id="s10.003" class="v67 g0 ui-draggable" style="display: list-item;">Item6</li>
                            </ul>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

Thank you, Dario

Answer 1

It may be worth while to use connected sortables rather the using sortable and draggable.

You may find it a bit simpler, and it looks to be less buggy, using something like this:

Working Example

$('.sortable1').sortable({
    placeholder: "sortable-placeholder",
    connectWith: ".sortable",
    helper: 'clone',
    revert: "invalid",
    cursorAt: {
        top: 0,
        left: 0
    },
    update: function () {
        var last = true;
        if ($('.sortable1').children().length === 0 && last) {
            $('.sortable1').after('<button type="button" class="btn btn-primary btn-large pull-right" id="btnVerify">check</button>');
            $('#btnVerify').on('click', checkClosure);
            $('.sortable1').hide();
            last = false;
        }
    }
});

$('.sortable').sortable({
    placeholder: "sortable-placeholder",
    helper: "clone",

    connectWith: ".sortable",
    cursorAt: {
        top: 0,
        left: 0
    },

    receive: function (event, ui) { // add this handler
        if (!ui.sender.hasClass("sortable")) {
            $(this).data().sortable.currentItem.attr("id", ui.sender.attr('id'));
            $(ui.item).detach(); // remove original item
        }
    }
});