Sortables with Draggables bug?

Sortables with Draggables bug?


I have a need to make a sort of layout page where you can drag
elements into specific positions. So basically a draggable connected
to multiple sortables. I've put together some sortable and layout
(demo) code and come up with this:
    var updateUpDown = function(sortable) {
        $('dl:not(.ui-sortable-helper)', sortable)
            .removeClass('first').removeClass('last')
            .find('.up, .down').removeClass('disabled').end()
            .filter(':first').addClass('first').find('.up').addClass('disabled').end().end()
            .filter(':last').addClass('last').find('.down').addClass('disabled').end().end();
    };
    var moveUpDown = function() {
        var link = $(this),
            dl = link.parents('dl'),
            prev = dl.prev('dl'),
            next = dl.next('dl');
        if(link.is('.up') && prev.length > 0)
            dl.insertBefore(prev);
        if(link.is('.down') && next.length > 0)
            dl.insertAfter(next);
        updateUpDown(dl.parent());
    };
    var sortableChange = function(e, ui) {
        if(ui.sender){
            var w = ui.element.width();
            ui.placeholder.width(w);
            ui.helper.css("width",ui.element.children().width());
        }
    };
    var sortableUpdate = function(e, ui) {
        updateUpDown(ui.element[0]);
        if(ui.sender)
            updateUpDown(ui.sender[0]);
    };
    $(document).ready(function() {
        var els = ['#header', '#content', '#sidebar', '#footer'];
        var $els = $(els.toString());
        //First, we initialize the sortable
        $els.sortable({
            items: '> dl',
            handle: 'dt',
            dropOnEmpty: true,
            placeholder: 'placeholder',
            revert: true,
            connectWith: els,
            change: sortableChange,
            update: sortableUpdate,
            stop: function(e, ui) {
                if($(ui.item[0]).hasClass('draggable')) {
                    $(ui.item[0]).prepend(' <span class="options"><a
class="up"><span>up</span></a> <a class="down"><span>down</span></a>
<a class="remove"><span>remove</span></a></span>');
                    $(ui.item[0]).removeClass('draggable').addClass('sort');
                    $(ui.item[0]).find('a.up, a.down').bind('click', moveUpDown);
                    $(ui.item[0]).find('a.remove').bind('click', removeItem);
                    $(ui.item[0]).attr('id', 's_' + $
(ui.item[0]).attr('id').substr(2));
                }
            }
        });
        //Now we initialize the draggables in the List Group
        $('.draggable').draggable({
            helper: function(e, ui) {
                return $(this);
},
            connectToSortable: $els,
            toSortable: function() {
                $(this).hide();
            },
            fromSortable: function() {
                $(this).show();
            }
        });
    });
It seems to work surprisingly, however if you drag and draggable item
over more than one sortable the offsets get messed up and it drops it
randomly on the page and not in the sortable.
Has anyone else tried this (this looks similar -
http://groups.google.com/group/jquery-ui/browse_thread/thread/fbccd3f152eba529/0d695ea6316b0e90?lnk=gst&q=sortables+draggable+connecttosortable#0d695ea6316b0e90)
or know how to fix this offset none-drop?