I am using jQueryUI sortable, when I have a long list of items, and I try to change the order and drag them around the items flicker and jump around the screen making it virtually impossible to order any of the items.
It looks like when you drag the item the "place here" place holder is miles away from where you actually want to drop the item?
How can I eliminate the flickering and jumping around the screen when trying to move / order items?
I have a full demo here http://jsfiddle.net/w3vvL/63/
I am now running out of ideas here. So any help would be great!
The code below is just a snippet, the rest is in the fiddle above. Thanks
//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);
}
jQueryUI provides sortable() method to reorder elements in list or grid using the mouse. This method performs sortability action based upon an operation string passed as the first parameter.
jQueryUI sortable() method is used to re-order elements in the list or grid form, by using the mouse. The sorting ability of this method is based on an operation string passed as the first parameter.
Enable a group of DOM elements to be sortable. Click on and drag an element to a new spot within the list, and the other items will adjust to fit. By default, sortable items share draggable properties.
By adding float left it will stop the flicking.
.dvdlist li {
display:inline-block;
border:1px solid #000;
cursor:move;
color: #222;
margin: 3px 3px 3px 0;
padding: 5px;
width: auto;
height: auto;
font-size: 12px;
text-align: center;
border: 1px solid #aaa;
border-radius: 5px;
background-color: #FDFCE8;
float:left;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With