Question

i have three list that all of them are connected with jquery-ui sortable, first list is Backlog works, second is in-Progress and last is finished.

i want move an item from first list to second and from second to third, if an item moved from first list to third list, list don’t accept element.

now all is done, but i dont know how prevent items begin moved on other connected list for example if has “a” (or …) classes?

$(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

One way to do it would be to use the ‘receive’ callback in conjunction with the ‘cancel’ method to validate any moves. 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();

Here I have made a matrix of acceptable moves and a function that validates based on the index of the source and destination lists. The source list is easy to get thanks to the ui object provided as a parameter by .sortable(), the destination list requires some quick traversal.