7

我正在使用 jQueryUI 可排序，当我有很长的项目列表时，我尝试更改顺序并将它们拖动到项目周围闪烁并在屏幕上跳跃，这使得几乎不可能订购任何项目。

看起来当您拖动项目时，“此处放置”占位符距离您实际想要放置项目的位置数英里？

尝试移动/订购商品时，如何消除屏幕闪烁和跳跃？

我在这里有一个完整的演示 http://jsfiddle.net/w3vvL/63/

我现在在这里没有想法了。所以任何帮助都会很棒！

下面的代码只是一个片段，其余的在上面的小提琴中。谢谢

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

1 回答 1

1

通过向左添加浮动，它将停止轻弹。 

.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;
}
于 2019-08-12T16:09:44.917 回答