jQuery Tabs Sortable and Revert To Tab

Question

This question relates to one I asked earlier (jQuery UI add Tabs with Drag e Drop)

Basically, the only 2 things I am left with that I can't figure out is after I added a new tab, but decide to remove it but then drop it somewhere it's not supposed to be (like on top of another tab) how to get the tab to revert back to it's original position? I know I have to add it here:

$('#tabsOptions ul').droppable({
drop: function (event, ui) {
    // Where the drop originates from
    if (ui.draggable.parent().attr("id") == "tabsList") {

        var expelledComponents = 
          $(ui.draggable.children("a").attr("href")).
               html().replace(emptyTab, "");

        $("#tabsComponentsList").append($(expelledComponents).html());

        $(ui.draggable.children("a").attr("href")).remove();

        $('#tabsOptions ul').append("<li>" + ui.draggable.text() + "</li>");

        $(ui.draggable).remove();

        //  Refreshes tabs - especially helpful when removing the first tab
        $('#tabs').tabs("refresh");

        $("#tabsComponentsList li").each(function (i, item) {
            $(item).attr("class", "selectable");
        });

        $("#tabsOptionsList li").each(function (i, item) {
            $(item).attr("class", "selectable");
        });
    }
}
});

The other thing is I can't figure out how to get the tabs sortable again? It worked earlier on, but I lost track where it stopped working and I have no idea why it isn't working any more.

Any help would be appreciated. Thanks in advance.

Here is the Fiddle

EDIT: Updated the fiddle. The problem was not removing and adding the tabs in the first place. I fixed that, but now I have one nagging last issue. Everything is working exactly the way I wanted to, but when I drag a tab, it's not visible during dragging it.

When I release over the appropriate area, it's removed correctly.

Anyone know how to make the Tab visible during dragging?

(If you look at the fiddle and the part with comment "// Makes the tabs draggable but makes the tabs unsortable", if you enable the next line, the tab is visible during dragging, but then the tabs won't sort)

Answer 1

When dropped back to the $('#tabslList').droppable it seems to become a pseudo-tab, with all the right attributes but none of a REAL tab's properties. I don't think the refresh is going to do it for you, there. You need to somehow re-append it to the $('#tabs') and then re-initialize the .tabs() widget.