javascript - jQuery UI のドラッグ アンド ドロップ可能なインタラクション

Question

2 つのリストビュー間の相互作用の作成に問題があります。

このスレッドの解決策に従いました: JQuery UI - Append Draggable to Droppable

これは

$(myDroppable).droppable({
    drop:function(event, ui) {
        ui.draggable.detach().appendTo($(this));
    }
});

ただ、落とすとliの位置がおかしくて何が原因かわかりません。JSFiddle: http://jsfiddle.net/lightbringer/W3p7d/2/

私は自分で別のソリューションを作成しました：

        $("#personlisting_assign").droppable({
        accept: "#wrapper_projectpersonlist li",
        drop: function(event, ui) {
            var el = ui.draggable[0].outerHTML;
            ui.draggable.remove();
            $("#personlist").append(el);
            $("#personlist li").removeAttr("style");
        }
    });

それは完全に機能しますが、要素が移動されると、古いリストに戻すことはできません。

この JSFiddle はこちらです: http://jsfiddle.net/lightbringer/W3p7d/

私の考えは、2 つのリストビュー間で項目を自由に移動することです。はい、私はconnectSortTableソリューションを見てきましたが、アイテムをエリアにドロップしたいのですが、そのエリアのリストビューに自動的に追加されます。

上記の 2 つの解決策と、それぞれの問題を解決する方法について教えてください。前もって感謝します