使可排序元素可拖动，可以放在droppable上，并在拖回时再次连接到列表

Question

我想使用jQuery-ui draggable ， droppable和sortable 。

我的功能如下：

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

我已经包含了一些可能有助于使其更清晰的图像：

左侧的可排序列表和一个空div，它限制右侧可拖动元素的移动。

元素C从可排序列表移动到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>

像这样的东西？ 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",          
        });
    }
});

在线演示（jsFiddle）

Answer 2

我创建了这个DEMO

我添加了一个新的<div id="main_container"> ，其中包含可排序列表和droppable。 所以现在在将元素放入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"
        });
    }
});