jquery - アコーディオンを接続されたソート可能なリストと組み合わせる方法

Question

jquery-uiの並べ替え可能なリストをアコーディオンセクション内に配置し、それらのリストを接続しようとしています。アイデアは、いくつかの異なるカテゴリでアイテムを並べ替えるためのコンパクトで直感的なインターフェイスを作成することです。アイテムは通常1つのセクション内でソートされますが、別のアコーディオンセクションに運ばれる場合もあります。

もうすぐです：http ：//jsfiddle.net/arasbm/H5MRw/7/

HTMLコードのサンプルを次に示します。

<div id="accordion">
   <h3 class="accordion-header"><a href="#">good</a></h3>
   <div class="accordion-section">
       <ul class="sortable-list">
           <li>dog</li>
           <li>butter</li>
       </ul>
   </div>
   ...
</div>

そしてjavascript：

// Setup the accordion
$("#accordion").accordion();
var $accordion = $("#accordion").accordion();

//Setup the sortable list
$("ul.sortable-list").sortable({
    connectWith: "ul.sortable-list", // connect all sortable lists together so items can be dragged from one list to aother
    stop: function(event, ui) {
        console.log("an item was moved");
    }
}).disableSelection();

$("h3.accordion-header").droppable({
    over: function(event, ui) {
        //it would be ideal to have some sort of tollorance or delay so user does not accidentally expand another section or accordion
        $(this).css('color', 'red');
        $accordion.accordion('activate', $(this));
    },
    out: function(event, ui) {
        $(this).css('color', 'green');
    }
});

まだ機能していない部分は、アイテムが1つのリストから別のリストにドラッグされている間、ユーザーに正しい視覚的フィードバックを示しています。ユーザーが別のアコーディオンセクションのヘッダーの上にアイテムをドラッグすると、そのセクションがアクティブになりますが、何らかの理由で、ドラッグ中に使用された要素が何らかの理由で消えます。アイテムは実際にはまだそこにあり、リストにドロップすると、プレースホルダーが表示され、アイテムを新しい場所にドロップできます。

この実装を修正して、ユーザーがアコーディオンの別のセクションに移動した場合でも、ドラッグしているアイテムを確認できるようにするにはどうすればよいですか。この問題の解決にご協力いただければ幸いですが、私が提供したjsFiddleを使用して解決策を示してください。