Question

我有三个列表，所有这些列表都与jquery-ui可连接，第一个列表是Backlog工作，第二个是in-Progress，最后一个完成。

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

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

一种方法是使用'receive'回调和'cancel'方法来验证任何移动。 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();

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

jquery sortable，如何阻止列表移动到其他连接列表

1 个答案: