Javascript jquery sortable,如何防止列表移动到其他连接的列表
我有三个列表,它们都与jQueryUISortable连接,第一个列表是积压工作,第二个列表是正在进行中的,最后一个列表是已完成的 我想将一个项目从第一个列表移动到第二个列表,从第二个列表移动到第三个列表,若一个项目从第一个列表移动到第三个列表,列表不接受元素 现在一切都完成了,但我不知道如何防止项目开始在其他连接的列表上移动,例如,如果有“a”(或…)类Javascript jquery sortable,如何防止列表移动到其他连接的列表,javascript,jquery,jquery-ui,jquery-ui-sortable,Javascript,Jquery,Jquery Ui,Jquery Ui Sortable,我有三个列表,它们都与jQueryUISortable连接,第一个列表是积压工作,第二个列表是正在进行中的,最后一个列表是已完成的 我想将一个项目从第一个列表移动到第二个列表,从第二个列表移动到第三个列表,若一个项目从第一个列表移动到第三个列表,列表不接受元素 现在一切都完成了,但我不知道如何防止项目开始在其他连接的列表上移动,例如,如果有“a”(或…)类 })) 一种方法是使用“receive”回调和“cancel”方法来验证任何移动 在这里,我制作了一个可接受的移动矩阵和一个基于源列表和目标
})) 一种方法是使用“receive”回调和“cancel”方法来验证任何移动
在这里,我制作了一个可接受的移动矩阵和一个基于源列表和目标列表的索引进行验证的函数。由于
.sortable()
提供了作为参数的ui
对象,源列表很容易获取,目标列表需要一些快速遍历。一种方法是使用“接收”回调和“取消”方法来验证任何移动
在这里,我制作了一个可接受的移动矩阵和一个基于源列表和目标列表的索引进行验证的函数。由于.sortable()
提供了ui
对象作为参数,因此很容易获取源列表,目标列表需要一些快速遍历
$(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;
}
}
});
$(".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();