简体   繁体   中英

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);
        }

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;
}

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM