When using jQueryUI sortable with a long list of items, I encounter an issue where the items flicker and jump around the screen as I try to change their order by dragging them. This makes it nearly impossible to organize the items effectively.
It seems like the "place here" placeholder is far away from where I actually want to drop the item. How can I resolve this problem and eliminate the flickering and jumping when moving/ordering items?
If you could provide assistance, that would be greatly appreciated! You can view the full demo here.
//Connect the two lists enable dragging between each one
$("#gallery").sortable({
revert: true,
connectWith: "#trash",
refreshPositions: true,
// Newly added to change container background
start: function(event, ui) {
$("li.ui-state-highlight").text("place here");
$(".containerTwo").stop().animate({"background-color":"#ffb9b9", "border-color":"#f06666", "border-top-style":"dashed", "border-right-style":"dashed", "border-bottom-style":"dashed", "border-left-style":"dashed", "border-width":"1px"}, 500);
},
stop: function(event, ui) {
$(".containerTwo").stop().animate({"background-color":"#fff", "border-color":"#aaa", "border-top-style":"solid", "border-right-style":"solid", "border-bottom-style":"solid", "border-left-style":"solid", "border-width":"1px"}, 50);
}
});
$("#trash").sortable({
revert: true,
connectWith: "#gallery",
refreshPositions: true,
// Newly added to change container background
start: function(event, ui) {
$("li.ui-state-highlight").text("place here");
$(".container").stop().animate({"background-color":"#d4f7cd", "border-color":"#51965a", "border-top-style":"dashed", "border-right-style":"dashed", "border-bottom-style":"dashed", "border-left-style":"dashed", "border-width":"1px"}, 500);
},
stop: function(event, ui) {
$(".container").stop().animate({"background-color":"#fff", "border-color":"#aaa", "border-top-style":"solid", "border-right-style":"solid", "border-bottom-style":"solid", "border-left-style":"solid", "border-width":"1px"}, 50);
}