javascript-使可排序元素可拖动,可将其拖放到可放下的对象上,并在拖回时可以再次连接到列表

我想一起使用jQuery-ui可拖放,可拖放和可排序.

我的功能如下：

>我有一个可排序的列表
>我创建了一个可放置的div
>可排序的项目是可拖动的,可以放在可放置在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/

解决方法:

我已经创建了这个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"
        });
    }
});

标签：jquery-ui-draggable,jquery-ui,jquery-ui-sortable,javascript,jquery
来源： https://codeday.me/bug/20191110/2013339.html