Question

我正在使用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);
        }

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

尝试在列表中排序和放置项目时，jQueryUI可排序闪烁和跳转

1 个答案: