Question

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

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

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

无论我尝试什么，我似乎无法让两个人一起工作。我想能够从#gallery拖到#trash并在每个div中单独拖动，没有闪烁。

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

你会看到你不能从#tash拖到#gallery，除非你把它拖到#gallery的最顶端。

我已经尝试将浮动左侧更改为内联块=这可行....但闪烁的系数恢复如此不成功。

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

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

我被告知clearfix解决方案。解决方案是在ul上添加clearfix（I.E. with：after and：before）但是我尝试过的东西没有用（除非我做错了。）

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

连接列表中的jQueryUI可排序浮动项高度问题和闪烁将无法正常工作

1 个答案:

更新