使可排序的元素可拖动，可以将其放在可放置的对象上，并在向后拖动时可以再次连接到列表

Question

我想同时使用 jQuery-ui draggable、droppable 和 sortable。

我的功能如下：

我有一个可排序的列表
我创建了一个 div 即 droppable
可排序的项目是可拖动的，可以放在 droppable 上，它们可以在 div
当拖动到可排序列表时，可拖动项目应该连接回可排序列表

我包含了一些可能有助于使这一点更清楚的图片：

左侧为可排序列表，右侧为空 div，用于限制可拖动元素的移动。

元素 C 已从可排序列表移至 div。它可以放在此 div 内的任何位置，但不能放在它之外。也可以接回sortable

元素 C 连接回 sortable。

如有任何帮助，我们将不胜感激。谢谢！

下面是我的代码：

$("#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>

是这样的吗？ http://jsfiddle.net/yfc9h4gq/

Answer 1

你可以这样做：

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>

JS

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

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

Online demo (jsFiddle)

Answer 2

我创建了这个DEMO

我添加了一个新的 <div id="main_container">，其中包含可排序列表和可放置列表。所以现在在将元素放入 droppable 之后，droppable 将包含在 #main_container

中

代码如下：

HTML:

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

JS:

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

使可排序的元素可拖动，可以将其放在可放置的对象上，并在向后拖动时可以再次连接到列表

Make sortable elements draggable which can be dropped on a droppable and can be again connected to the list when dragged back

javascript

jquery

jquery-ui

jquery-ui-sortable

jquery-ui-draggable