jquery ui拖放+可排序答案

【问题标题】：jquery ui drag drop + sortablejquery ui拖放+可排序
【发布时间】：2013-12-14 08:12:58
【问题描述】：

我也在尝试使拖放排序。我可以从 div 1 拖动到 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/

【问题讨论】：

标签： jquery jquery-ui draggable jquery-ui-sortable

【解决方案1】：

为此，您不能让拖放框中的项目再次可拖动，因为您不知道它是在尝试排序还是在拖动。

这是工作代码：Example 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();
        }
    });
});

为了让它正常工作，你不能让 drop 处理程序接受正在排序的项目，为此我们将 accept 过滤器添加到 droppable 处理程序中：

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

这意味着您可以将项目从底部框拖到顶部，然后对顶部框进行排序。但是，您不能再将项目拖到顶框之外。

您必须设计一种新方法来移除它们（可能可以使用一个标志来移除顶部框的可拖动/可排序功能之间的切换）

【讨论】：

你的代码不能不从div2拖回div1

【解决方案2】：

我有同样的问题，我发现了这个article and demo

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

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

关键是sortable()的connectWith选项希望这会有所帮助。

【讨论】：

我找不到演示，有没有你的另一个例子？