jquery - jQuery タブの並べ替えとタブへの復帰

Question

この質問は、私が以前に尋ねたものに関連しています ( jQuery UI add Tabs with Drag e Drop )

基本的に、私が把握できない唯一の2つのことは、新しいタブを追加した後ですが、それを削除することを決定し、それを本来あるべきではない場所(別のタブの上など)にドロップする方法です。タブを元の位置に戻しますか? ここに追加する必要があることはわかっています：

$('#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");
        });
    }
}
});

もう1つは、タブを再びソート可能にする方法がわかりませんか? 以前は機能していましたが、どこで機能しなくなったのかわからなくなり、なぜ機能しなくなったのかわかりません。

どんな助けでも大歓迎です。前もって感謝します。

ここにフィドルがあります

編集：フィドルを更新しました。問題は、そもそもタブを削除して追加することではありませんでした。私はそれを修正しましたが、今、1つのしつこい最後の問題があります。すべてが思い通りに機能していますが、タブをドラッグすると、ドラッグ中にタブが表示されません。

適切な領域でリリースすると、正しく削除されます。

ドラッグ中にタブを表示する方法を知っている人はいますか?

（フィドルとコメント「// Makes the tabs draggable but makes the tabs unsortable」の部分を見ると、次の行を有効にすると、ドラッグ中にタブが表示されますが、タブはソートされません）