jquery - 並べ替え、ドロップ、ドラッグが可能なコンテナ

Question

この質問は、jQuery の UI に関連しています。

誰でも次のことを行う例を提供できますか:

コンテナ A はソート可能でドロップ可能
任意の要素をコンテナ A にドラッグして並べ替えることができます。
任意の要素をコンテナ A からドラッグして、ページ内でドラッグできるようにすることができます。
コンテナ A もページ上でドラッグ可能

これは私がこれまでに持っているものです:

$(function() {
    $("#sortable").sortable().droppable();
    $("#sortable").disableSelection();
    $("#drop").droppable({
        accept: "#sortable li",
        drop: function (evt, ui) {
            var $destination = $(this); 
            ui.draggable.appendTo( $destination ); 

        }
    }).draggable();
});

ここでフィドルを作成しました： http://jsfiddle.net/eEJHb/1/

私が直面している問題: A) ソート可能なものをコンテナーにドロップできない B) コンテナーに入ったら、要素をドラッグしてソート可能なリストに戻す必要がある

ご協力いただきありがとうございます！

UPDATE ** 私の問題の一部は、オプション「connectWith」にありました。それは単に機能していませんでした。代わりに、オプション "connectToSortable" (ドラッグ可能なオプションとして) を使用し、並べ替え可能なものとドラッグ可能なものを連携させることができました。