jquery - 要素の位置を変更するJquery UIアコーディオン

Question

これは、私が抱えている問題を説明するのに役立つことを願っています。似ているが異なる機能が必要です。 http://jsfiddle.net/HgAQu/1856/

アイテムをドラッグすると、確かに位置が変わりますが、別の機能が必要です。ポジションを交換する必要があります。

例に見られるように、アイテム 1 をアイテム 7 に移動しても、場所は変わりません。何が起こるかというと、アイテム 1 が最後で、アイテム 7 がアイテム 1 の前です。

つまり、移動前の状態は次のとおりです。 1 2 3 4 5 6 7

その移動後、次のようになります: 2 3 4 5 6 7 1

そして、次のようなものが必要です: 7 2 3 4 5 6 1

すべての要素をレンダリングしてアコーディオンに挿入しているので、それらを使ってほとんどすべてのことができます。

次のコードを使用して、最初の開始移動と終了移動を取得します。そして、それらの数は正確です。これは私が使用するコードです:

accordion({
            header: "> div > h3",
            collapsible: true                      
        }).sortable({
              axis: "y",
              handle: "h3",                  
              start: function (event, ui) {
                  ui.item.startPos = ui.item.index();
              },
              stop: function (event, ui) {
                  var start =  ui.item.startPos;
                  var end = ui.item.index();
              }
        });

そして、その変更はモデルに反映されます。値 (バックボーン) を交換するだけです。しかし、上で説明した問題のため、UI（アコーディオン）は一致しません。

私がこれまでに持っている解決策は、アコーディオンを空にして、モデルから再レンダリング/リフレッシュすることです。それはうまくいきます。よりクリーンなソリューションがあるのだろうかと思っています。たぶん、スワップされた要素をレンダリングして、手動でアコーディオンに挿入します。それはどれほど難しいですか、どのような副次的な問題が発生する可能性がありますか? 要素を手動で操作して、アコーディオン機能を破棄しますか?