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

Question

我想一起使用void someFunction (int x[]) { // Pointer to first element here, size is int-pointer-size. std::cout << sizeof(x) << std::endl; } : // Array here, size is 13 * int-size. int xyzzy[] = { 3, 1, 4, 1, 5, 9, 2, 6, 5, 3, 5, 9, 0 }; std::cout << sizeof(xyzzy) << std::endl; someFunction(xyzzy); jQuery-ui，draggable和droppable。

我的功能如下：

• 我有一个可排序的列表
• 我创建了sortable div
• 可排序的项目是可拖动的，可以放在droppable上，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",          
        });
    }
});

Online demo (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"
        });
    }
});