jquery - あるソート可能なリストから別のリストにアイテムをドロップする

Question

互いに接続されていない 2 つの並べ替え可能なリストがあります。

<ul id="list1">
    <li>Item1</li>
    <li>Item2</li>
    <li>Item3</li>
</ul>
<ul id="list2">
    <li>Container 1</li>
    <li>Container 2</li>
    <li>Container 3</li>
</ul>

Jクエリ:

$("#list1").sortable({
    items: "li",
    distance: 25,
    out: function (event, ui) {},
    over: function (event, ui) {},
    stop: function (event, ui) {}
});

$("#list2").sortable({
    items: "li",
    distance: 25,
    out: function (event, ui) {},
    over: function (event, ui) {},
    stop: function (event, ui) {}
});

最初のリストのアイテムを 2 番目のリストの任意のアイテムにドロップし、ドロップされたアイテムとドロップされた場所を取得できるようにするにはどうすればよいですか?

ライブjsfiddle

編集:最初のリストの要素と2番目のリストの要素の間に関係を作成したい。ユーザーが最初のリストから項目をドラッグして 2 番目のリストの任意の項目にドロップすると、1 つのリレーション (例: item1 - container1) が取得され、item1 は元の場所に戻ります。

Answer 1

以下を使用します。それは私にとってはうまくいっています

$("#list1").sortable({
    connectWith: '#list2'
});
$("#list2").sortable({
    connectWith: '#list1'
});