I have six lists that are connected to drag and drop between. I have a main list with 35 entries with all the list items populating it. Then I five sub lists with seven entries that all start out blank. So, I'm wanting to sort the 35 items out to the five sub-areas. I've got it set so that the sub-lists hit there limits, seven, and don't allow anymore entries in, unless an entry is dragged out to another available list. I am fine with the quick drop animation speed that basically just instantly places it in the lists that are available, yet when I go to drop an item into a full sub-list the item is placed back in the original list too fast to really tell that it didn't get placed in the sub-list.
I've found code that will allow the revert functionality to be set. This allows for an animation to occur. So, there is nor problem getting an animation at all. Here's where the issue arises. I want the "snap" to occur on a list that is available, yet I want the slow revert to occur on a list that is full so that the user can tell that there attempt failed and where it went back to.
Here is the code I have:
$( "#sortable" ).sortable({
connectWith: ".connectedSortable",
placeholder: "ui-sortable-placeholder",
update: function(event, ui) {
result = $(this).sortable('toArray');
for (i=0; i < result.length; i++) {
var number = result[i].replace(/[^0-9]/g, '')
$("#div" + number).css("background-color","transparent");
}
var mylist = $(this);
var listitems = mylist.children('li').get();
listitems.sort(function(a, b) {
return $(a).text().toUpperCase().localeCompare($(b).text().toUpperCase());
})
$.each(listitems, function(idx, itm) { mylist.append(itm); });
}
}).disableSelection();
var result = [];
$( "#sortList1, #sortList2, #sortList3, #sortList4, #sortList5" ).sortable({
connectWith: ".connectedSortable",
placeholder: "ui-sortable-placeholder",
receive: function(ui) {
if($(this).children().length >=7) { //for at most 7 children in sortable
$(this).children().addClass('filled');
$(this).addClass('dontDrop');
$('.connectedSortable').sortable('option', 'connectWith', $('.connectedSortable').not('.dontDrop'));
$('.draggableOnly').draggable('option', 'connectToSortable', $('.connectedSortable').not('.dontDrop'));
} else {
$(this).children().removeClass('filled');
}
},
remove: function(){
if($(this).children().length <= 7){
$(this).removeClass('dontDrop');
$(this).children().removeClass('filled');
}
if($(this).parent().siblings().length <= 7) { //for at most 7 children in sortable
$(this).parent().parent().children().removeClass('filled');
$(this).parent().parent().removeClass('dontDrop');
$('.connectedSortable').sortable('option', 'connectWith',$('.connectedSortable').not('.dontDrop'));
$('.draggableOnly').draggable('option', 'connectToSortable',$('.connectedSortable').not('.dontDrop'));
}
},
update: function(event, ui) {
result = $(this).sortable('toArray');
for (i=0; i < result.length; i++) {
var number = result[i].replace(/[^0-9]/g, '')
if ($(this).attr('id') == "sortList1") {
$("#div" + number).css("background-color","#006800");
} else if ($(this).attr('id') == "sortList2") {
$("#div" + number).css("background-color","#00a200");
} else if ($(this).attr('id') == "sortList3") {
$("#div" + number).css("background-color","#00db00");
} else if ($(this).attr('id') == "sortList4") {
$("#div" + number).css("background-color","#aaff00");
} else {
$("#div" + number).css("background-color","#ffff00");
}
}
var mylist = $(this);
var listitems = mylist.children('li').get();
listitems.sort(function(a, b) {
return $(a).text().toUpperCase().localeCompare($(b).text().toUpperCase());
})
$.each(listitems, function(idx, itm) { mylist.append(itm); });
}
}).disableSelection();
});
I can set it so the animation occurs by using the following in the initialization of the list:
function initList() {
result = $("#sortable").sortable('toArray');
var indexNum = 0;
for (var competencyName in competencyListHash) {
indexNum++;
$("#div" + indexNum).css("background-color","transparent");
var competencySpanText = competencyName + '<span style="width:500px;">' + competencyListHash[competencyName]['description'] + '</span>';
$("#competency" + indexNum + "Title").html(competencySpanText);
}
$('.connectedSortable').sortable({revert: 100});
$( "#sortable" ).disableSelection();
}
Yet that only allows animation for all occurrences. Here is some jsfiddle to check it out, but it works better on my machine as to its functionality of clicking and dragging: