jQuery UI: connect sortable lists through tabs

Here is an example at jQuery UI official site, showing how to connect sortable lists through tabs. But I want a modified version as follow: when the dragging element is moved over a tab, the tab become selected automatically, so that I can drop the element at any position inside the selected tab.

Have spent a hour trying 开发者_如何学Cdifferent ways but didn't get good luck. Anyone has some ideas?

Try this one: http://jsfiddle.net/2Xq2x/1/. Only a few modifications the original one.

$(function() {
    $("#sortable1, #sortable2").sortable({
        connectWith: "#sortable1, #sortable2"
    }).disableSelection();
    var $tabs = $("#tabs").tabs();
    var $tab_items = $("ul:first li", $tabs).droppable({
        accept: ".connectedSortable li",
        hoverClass: "ui-state-hover",
        over: function(event, ui) {
            var $item = $(this);
            var $list = $($item.find("a").attr("href")).find(".connectedSortable");
            $tabs.tabs("select", $tab_items.index($item));
            ui.draggable.appendTo($list).show("slow");
        }
    });
});

Working on this one, have a start but could use some insight from UI guys

http://jsfiddle.net/L8QAE/1/