jQuery draggable + sortable: strange mouse offset behaviour

Question

I have draggable list of < li > elements which I'm able to drag into another empty < ul > element. If I drag the first < li > element of the draggable original < ul > everything works fine...

Problem:

...but when I drag any other < li > element of that list the 'helper' moves away from the mouse pointer as soon as I cross the border of the recieving sortable < ul >. More precicely it moves up to the top of the list.

Has anyone seen this and knows a solution? Well, my problem is, I'm just using jquery, not really deeply into it and never really used javascript in depth either.

More info about the problem:

My jQuery code:

$(document).ready(function() {
    $('#roleList > li').draggable({
        connectToSortable: '#roleDrop',
        containment: '#container',
        revert: 'invalid'
    });                   
    $('#roleDrop').sortable({
        cursor: 'move',
        containment: '#container',
        revert: true,
        update: function() {
            var order = $('#roleDrop').sortable('serialize');
            $.ajax({
                type: 'POST',
                url: '".$postUrl."',
                dataType: 'html',
                data: order
            });
        }                          
    });
    $('#roleList').disableSelection();
});

While #roleList and #roleDrop are the aforementioned unordered lists, #container is a table.

Now a screenshot of what happens.

I start dragging the item:

http://drop.io/download/public/dkabw5hlq3yfm0f84yji/7bf91122adc241373a5da13b5bde4b231644c1c5/da142000-ff76-012b-41ee-f10bc9db08a6/5a1bfa70-68f6-012c-6d08-f2025930ce6a/v2/thumbnail_large

When I cross the border of the second < ul > the helper jumps up.

http://drop.io/download/public/dkabw5hlq3yfm0f84yji/2fad1d633d38cf593da46c638d1930431ea5fd35/da142000-ff76-012b-41ee-f10bc9db08a6/5c65c4c0-68f6-012c-6601-f12da00d9d47/v2/thumbnail_large

If you need the xhtml markup too, please tell me.

Answer 1

Try adding helper: 'clone' to your .draggable options:

$('#roleList > li').draggable({
    helper: 'clone',
    connectToSortable: '#roleDrop',
    containment: '#container',
    revert: 'invalid'
});                   

According to the jQuery documentation, you should set this option when connecting a draggable to a sortable.

While this yields a different interface experience (dragged items are cloned instead of moved), it's at least a temporary workaround for what the documentation implies is a known problem. Additional event handling could clean the original item out of #roleList during the #roleDrop update callback.