jquery可排序，如何防止列表移动到其他连接列表答案

【问题标题】：jquery sortable, how prevent a list moved to other connected listsjquery可排序，如何防止列表移动到其他连接列表
【发布时间】：2012-02-14 19:23:28
【问题描述】：

我有三个列表，它们都与 jquery-ui 可排序连接，第一个列表是待办事项，第二个是进行中，最后一个已完成。

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

现在一切都完成了，但我不知道如何防止项目开始在其他连接列表上移动，例如如果有“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;
        }
    }
});

});

【问题讨论】：

标签： javascript jquery jquery-ui jquery-ui-sortable

【解决方案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 对象，源列表很容易获得，目标列表需要一些快速遍历。

【讨论】：