Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQueryUI sortable flickering and jumping when trying to order and place items in the list

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);
        }
like image 334
John Avatar asked Mar 26 '13 10:03

John


People also ask

How does jquery sortable work?

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.

What is UI sortable?

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.

How to use jQueryUI sortable?

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.


1 Answers

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;
}
like image 70
Rickstar Avatar answered Nov 15 '22 06:11

Rickstar