jquery - 将项目从一个可排序列表拖放到另一个

Question

我有两个彼此未连接的可排序列表：

<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>

查询：

$("#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) {}
});

我怎样才能使第一个列表中的一个项目成为第二个列表中的任何项目，并获取哪个被丢弃以及它被丢弃的位置？

现场jsfiddle

编辑：我想在第一个列表的元素与第二个列表的元素之间创建关系。如果用户从第一个列表中拖动一个项目并将其放入第二个列表的任何项目中，我应该得到一个关系（例如 item1 - container1）并且 item1 应该回到它的位置。

Answer 1

使用以下内容。它对我来说很好用

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