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/

Answer 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();
        }
    });
});

要使其正常工作，您不能允许放置处理程序接受正在排序的项目，为此，我们将 accept 过滤器添加到可放置处理程序:

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

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

您将必须设计一种新方法来删除它们(可以使用标记来删除顶部框的可拖动/可排序功能之间的切换来完成)