jQuery draggable + sortable: strange mouse offset behaviour

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.