连接列表中的 jQueryUI 可排序浮动项目高度问题和闪烁不起作用

Question

我有两个连接列表，#gallery 和#trash。当您在#gallery 中拖动项目时，其平滑且无闪烁。

我希望能够从#trash 拖动到图库。但是，它不允许您这样做。您必须将项目拖动到#gallery 的顶部，然后它会再次变为活动状态，然后允许您拖动项目。

发生这种情况是因为当 float: left 在其所有子元素上启用时，ul 的高度为 0。添加溢出：隐藏到 ul 将解决此问题，但会重新引入闪烁。

无论我尝试什么，我似乎都无法让两者一起工作。我希望能够从#gallery 拖动到#trash，并在每个 div 中单独拖动而不会闪烁。

我在下面有一个完整的演示： http://jsfiddle.net/w3vvL/67/

如您所见，您无法从#tash 向上拖动到#gallery，除非您将其拖动到#gallery 的最顶部。

我已尝试将左侧浮动更改为 inline-block = 这可行....但闪烁又回来了，所以没有成功。

#gallery li{display: inline-block;}
#trash li{display: inline-block;}

也尝试给 ul 一个高度，但它再次引入了闪烁！

我听说过 clearfix 解决方案。解决方案是在 ul 上添加 clearfix（带有 :after 和 :before 的 I.E. 但我尝试过的方法没有用（除非我做错了。）

#gallery:after { clear:both; content:'.'; display:block; height:0; line-height:0; font-size:0; visibility:hidden; padding:0; margin:0;}

也找到了这个，但不确定这是否有帮助：

activate: function(en, ui) {
   // do something here, height, float, inline, overflow etc?
       },
deactivate: function(en, ui) {
      // then do something here
    },

任何帮助将不胜感激。希望有人可以让我摆脱痛苦！我已经厌倦了我能想到的一切。

干杯

Answer 1

这是我所做的更改：http://jsfiddle.net/w3vvL/68/

var galleryHeight;
var selectedLis;
var timer;

function checkChanges(){
    var tempHeight;
    if(selectedLis != $("#gallery li").length)
    {
        selectedLis = $("#gallery li").length;
        $('#gallery').css('height', 10 + 'px');
        galleryHeight = $('#selectedContainer').css("height");      
        console.log(galleryHeight);
        tempHeight = parseInt(galleryHeight) - 49; 
        $('#gallery').css('height', tempHeight + 'px');
    }
}

$(document).ready(function(){
    galleryHeight = $('#selectedContainer').css("height");
    selectedLis = $("#gallery li").length;
    timer = setInterval(checkChanges,5000);
});

基本上，每次列表变大或变小时，我都会更新 ul 的高度。 5000ms 的等待时间可能有点长，可以缩短。希望这是您想要的，我不确定它是否在 jsfiddle 上正常工作，因为我只是在离线测试它。

更新：

我放了一个延迟，似乎已经平滑了很多：http://jsfiddle.net/w3vvL/69/

//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").delay(1500); //delay here seems to smooth out the movement
        $(".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"}, 50);
    }, 
    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);
    }
});