javascript - jquery sortable，如何防止列表移动到其他连接列表

Question

我有三个列表，它们都与 jquery-ui sortable 相关联，第一个列表是 Backlog works，第二个是 in-Progress，最后一个是 finished。

我想将一个项目从第一个列表移动到第二个列表，然后从第二个列表移动到第三个列表，如果一个项目从第一个列表移动到第三个列表，列表不接受元素。

现在一切都完成了，但我不知道如何防止项目开始在其他连接列表上移动，例如，如果有“a”(或...)类？

$(function(){
$(".tasks").sortable({
    connectWith : ".tasks",
    handle : "h2",
    items : ".task",
    opaciry : 0.6,
    revert : true,
    placeholder : "ui-state-highlight",
    forcePlaceholderSize : true,
    remove : function(e,obj){
        $(".tasks").each(function(){
            if($(this).children(".task").length == 0){
                $(this).addClass("empty");
            } else if($(this).hasClass("empty")) {
                $(this).removeClass("empty");
            }
        });
    },
    out : function(e,obj){
        $(".col").removeClass("red green");
        $(".tasks").sortable("enable");
    }
});
$("#p .tasks").sortable({
    receive : function(e,obj){
        obj.item.removeClass("tb").addClass("td");
    },
    over : function(e,obj){
        if(obj.item.hasClass("tb")) {
            $("#p").addClass("green");
        } else {
            $("#p").addClass("red");
            $("#p .tasks").sortable("disable");
            return false;
        }
    }
});

});

Answer 1

一种方法是结合使用“接收”回调和“取消”方法来验证任何移动。 jsFiddle

$(".tasks").sortable({
    connectWith: ".tasks",
    receive: function (event, ui) {
        var validMove = function (a, b) {
                var changeMatrix = [
                    [true, true, false],
                    [true, true, true],
                    [false, true, true]
                ];
                return changeMatrix[a][b];
            },
            $lists, endList, startIndex, endIndex;
        $lists = $(".tasks");
        endList = $(ui.item).closest('.ui-sortable').get(0);

        startIndex = $lists.index(ui.sender);
        endIndex = $lists.index(endList);

        if (!validMove(startIndex, endIndex)) {
            $(ui.sender).sortable('cancel');
        }
    }
}).disableSelection();

在这里，我制作了一个可接受的移动矩阵和一个根据源列表和目标列表的索引进行验证的函数。由于 .sortable() 提供的作为参数的 ui 对象，源列表很容易获得，目标列表需要一些快速遍历。