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

【问题标题】：jQueryUI sortable flickering and jumping when trying to order and place items in the list尝试在列表中排序和放置项目时，jQueryUI 可排序闪烁和跳跃
【发布时间】：2013-03-16 02:47:00
【问题描述】：

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

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

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

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

我现在的想法已经用完了。所以任何帮助都会很棒！

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

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

【问题讨论】：

尝试将float: left;添加到#gallery li
我无法添加有价值的东西，但请不要调用我的方法swapIcons。这完全是误导，因为该方法没有交换任何图标。它实际上所做的是，它改变了列表元素在 DOM 中的位置。然后列表元素有一个样式表，该样式表在每个可以删除它的容器中显示不同的图标。这是隐含的，与函数的实际作用无关。
float left 可以完成这项工作，但是当我尝试从一个 div 拖动到另一个 div 时，我对 #trash li {float:left} 执行相同操作，反之亦然，“此处的位置”不会显示除非你直接拖到 div 的顶部？任何想法如何解决？为回复欢呼！
这是因为ul 在其所有子元素上启用float: left 时高度为0。将overflow: hidden 添加到ul 将解决此问题，但会重新引入闪烁。
我的物品也有同样的问题（闪烁和跳跃）您设法解决了问题吗？如果是这样，你能发一个代码sn-p吗？

标签： jquery html css jquery-ui

【解决方案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;
}

【讨论】：