Javascript 使可排序元素可拖放，这些元素可以拖放到可拖放的列表上，并且在拖放回列表时可以再次连接到列表

我想同时使用

jqueryui

draggable

、

droppable

和

sortable

我的功能如下：

• 我有一个可排序的列表
• 我已经创建了一个

  div

  ，它是

  droppable

• 可排序项是可拖动的，可以放置在

  可拖放

  上，可以在

  div中自由移动

• 当拖动到可排序列表上时，应将可拖动项连接回可排序列表

我提供了一些图片，可以帮助您更清楚地了解这一点：

左边是一个可排序列表，右边是一个空div，用于约束可拖动元素的移动

元素C从可排序列表移动到div。它可以放置在此div内的任何位置，但不能放置在此div之外。它还可以连接回可排序表

元素C连接回可排序表

任何帮助都将不胜感激。谢谢

下面是我的代码：

$("#sortable1").sortable({
    connectWith: '.connectedSortable, #trash'
}).disableSelection();

$("#drop_zone").droppable({
    accept: ".connectedSortable li",
    hoverClass: "ui-state-hover",
    drop: function (ev, ui) {
        ui.draggable.sortable("destroy");
        ui.draggable.draggable({
            connectToSortable: "#sortable1",
            containment: "#drop_zone"
        });
    }
});



<ul id="sortable1" class="connectedSortable ui-helper-reset">
    <li class="ui-state-default">A</li>
    <li class="ui-state-default">B</li>
    <li class="ui-state-default">C</li>
    <li class="ui-state-default">D</li>
</ul>

<ul id="drop_zone" class="ui-helper-reset"></ul>

<div id="main_container">
<ul id="sortable1" class="connectedSortable ui-helper-reset">
    <li class="ui-state-default">A</li>
    <li class="ui-state-default">B</li>
    <li class="ui-state-default">C</li>
    <li class="ui-state-default">D</li>
</ul>

<ul id="drop_zone" class="ui-helper-reset"></ul>
</div>

$("#sortable1").sortable({
    stop: function(event, ui) {
        ui.item.attr("style", "");
    }
});

$("#drop_zone").droppable({
    accept: ".connectedSortable li",
    hoverClass: "ui-state-hover",
    drop: function(ev, ui) {
        ui.draggable.remove();
        var item = ui.draggable.clone();
        item.appendTo($(this));
        item.draggable({
            connectToSortable: "#sortable1",
            containment: "#main_container"
        });
    }
});

$（“#可排序1”）。可排序({
connectWith:'.connectedSortable，#trash'
}).disableSelection（）；
$（“#下降区”）。可下降({
接受：“.connectedSortable li”，
hoverClass:“ui状态悬停”，
下拉：功能（ev、ui）{
ui.draggable.sortable（“销毁”）；
ui.draggable.draggable({
connectToSortable:“#可排序1”，
安全壳：“下降区”
});
}
});

A
B
C
D

---

像这样的

您可以这样做：

HTML

<ul id="sortable1" class="connectedSortable ui-helper-reset">
    <li class="ui-state-default">A</li>
    <li class="ui-state-default">B</li>
    <li class="ui-state-default">C</li>
    <li class="ui-state-default">D</li>
</ul>

<ul id="drop_zone" class="ui-helper-reset"></ul>

我已经创建了这个

我添加了一个新的

，其中包含可排序列表和可拖放列表。因此，现在在将元素放入可拖放对象中之后，可拖放对象将包含在

#main_容器中

代码如下：

HTML:

$("#sortable1").sortable({
    connectWith: '.connectedSortable, #trash'
}).disableSelection();

$("#drop_zone").droppable({
    accept: ".connectedSortable li",
    hoverClass: "ui-state-hover",
    drop: function (ev, ui) {
        ui.draggable.sortable("destroy");
        ui.draggable.draggable({
            connectToSortable: "#sortable1",
            containment: "#drop_zone"
        });
    }
});



<ul id="sortable1" class="connectedSortable ui-helper-reset">
    <li class="ui-state-default">A</li>
    <li class="ui-state-default">B</li>
    <li class="ui-state-default">C</li>
    <li class="ui-state-default">D</li>
</ul>

<ul id="drop_zone" class="ui-helper-reset"></ul>

<div id="main_container">
<ul id="sortable1" class="connectedSortable ui-helper-reset">
    <li class="ui-state-default">A</li>
    <li class="ui-state-default">B</li>
    <li class="ui-state-default">C</li>
    <li class="ui-state-default">D</li>
</ul>

<ul id="drop_zone" class="ui-helper-reset"></ul>
</div>

$("#sortable1").sortable({
    stop: function(event, ui) {
        ui.item.attr("style", "");
    }
});

$("#drop_zone").droppable({
    accept: ".connectedSortable li",
    hoverClass: "ui-state-hover",
    drop: function(ev, ui) {
        ui.draggable.remove();
        var item = ui.draggable.clone();
        item.appendTo($(this));
        item.draggable({
            connectToSortable: "#sortable1",
            containment: "#main_container"
        });
    }
});

---

你试过自己编写代码吗？是的，那么你应该提供你的代码并创建一个演示，如果你的答案是否定的，那么没有人会对你的行为进行编码。你可以这样做，就像感谢你的回答一样；我为@AliSoltani的答案创建了一个修改版本，这与我昨天的尝试类似。仍然没有运气：在AliSoltani的回答中，你已经接受了一个错误。一旦您将可拖放设备放到可拖放设备上，那么您就可以将该可拖放设备拖动到可拖放设备下不允许的任何位置。在我的回答中，我也注意到了这个问题。谢谢你指出这一点。你说得对，太好了！非常感谢。