jquery sortable, comment empêcher une liste d'être déplacée vers d'autres listes connectées

Question

J'ai trois listes qui sont toutes reliées par un système de tri jquery-ui. La première liste est celle des travaux en attente, la deuxième celle des travaux en cours et la dernière celle des travaux terminés.

Je veux déplacer un élément de la première liste à la deuxième et de la deuxième à la troisième, si un élément est déplacé de la première liste à la troisième, la liste n'accepte pas l'élément.

Maintenant tout est fait, mais je ne sais pas comment empêcher les éléments de commencer à être déplacés sur d'autres listes connectées, par exemple s'il y a des classes "a" (ou ...) ?

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

Une façon de le faire serait d'utiliser le rappel "receive" en conjonction avec la méthode "cancel" pour valider tout mouvement. 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();

Ici, j'ai créé une matrice des mouvements acceptables et une fonction qui valide en fonction de l'index des listes de sources et de destinations. La liste source est facile à obtenir grâce à la fonction ui fourni en tant que paramètre par .sortable() La liste des destinations doit être parcourue rapidement.