使可排序元素可拖動，可以放在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"
        });
    }
});