jQuery UI拖放和排序

Question

我试图使拖放排序变得可行。我可以从 div 1 拖到 div 2，也可以从 div 2 拖回 div 1，但由于我使用了克隆，我无法使排序工作。

你有什么想法吗？

$(document).ready(function() {

    $("#qselected").sortable();
    $("#qselected").disableSelection();

    $(".qitem").draggable({
        containment : "#container",
        helper : 'clone',
        revert : 'invalid'
    });

    $("#qselected, #qlist").droppable({
        hoverClass : 'ui-state-highlight',
        drop : function(ev, ui) {
            $(ui.draggable).clone().appendTo(this);
            $(ui.draggable).remove();

            $(".qitem").draggable({
                containment : "#container",
                helper : 'clone',
                revert : 'invalid'
            });
        }
    });
});

实时演示：http://jsfiddle.net/6xXPq/4/

- Jordi Kroon

Answer 1

为了让这个功能正常工作，您不能再次使拖放框中的项可拖动，因为您无法确定它是在尝试排序还是拖动。

以下是可行的代码：JSFiddle 示例

$(document).ready(function() {
    $("#qselected").sortable();
    $("#qselected").disableSelection();

    $(".qitem").draggable({
        containment : "#container",
        helper : 'clone',
        revert : 'invalid'
    });

    $("#qselected, #qlist").droppable({
        hoverClass : 'ui-state-highlight',
        accept: ":not(.ui-sortable-helper)",
        drop : function(ev, ui) {
            $(ui.draggable).clone().appendTo(this);
            $(ui.draggable).remove();
        }
    });
});

为了使其正常工作，您不能允许拖放处理程序接受正在排序的项目。为此，我们向可拖放的处理程序添加了“accept”过滤器：

accept: ":not(.ui-sortable-helper)",

现在你可以将底部框中的项目拖到顶部框中，然后对顶部框进行排序。但是，你不能再将项目拖到顶部框之外了。

你需要想出一种新的方法来移除它们（可以使用标志来删除顶部框的可拖动/可排序功能之间的切换）

- Nunners

---

您的代码无法从div2拖放回div1。 - Terry Lin

Answer 2

我有同样的问题，我找到了这个文章和演示

不需要使用draggable和droppable，只需使用以下代码（查看演示）：

$('#example-1-4 .sortable-list').sortable({
        connectWith: '#example-1-4 .sortable-list',
        containment: '#containment'
    });

重点是sortable()的选项connectWith。 希望这可以帮到你。

- Terry Lin

---

我找不到演示文稿，你有其他的例子吗？ - Szymon Zachariasz