0

#gallery と #trash という 2 つの接続されたリストがあります。#gallery でアイテムをドラッグすると、スムーズでちらつきがありません。

#trash からギャラリーにドラッグできるようにしたいです。ただし、これを行うことはできません。アイテムを #gallery の上部にドラッグする必要があります。その後、再びアクティブになり、アイテムをドラッグできるようになります。

これは、すべての子要素で float: left が有効になっている場合に ul の高さが 0 になるために発生します。overflow: hidden を ul に追加すると、これは修正されますが、ちらつきが再発します。

私が何をしようとしても、2つを一緒に機能させることはできないようです。#gallery から #trash にドラッグして、ちらつきなしで各 div を個別にドラッグできるようにしたいと考えています。

以下に完全なデモがあります： http://jsfiddle.net/w3vvL/67/

ご覧のとおり、#tash から #gallery にドラッグするには、#gallery の最上部までドラッグしないとできません。

float left を inline-block = This works.... に変更しようとしましたが、ちらつきが戻ってきたので成功しませんでした。

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

また、UL に高さを与えようとしましたが、ちらつきが再び発生します。

clearfix ソリューションについて説明を受けました。解決策は、ulにclearfixを追加することです（ :after および :before を含むIE）が、私が試したことがうまくいきませんでした（間違っていない限り）

#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
    },

どんな助けでも本当に感謝します。誰かがこれで私の痛みから解放してくれることを願っています! 私は考えることができるすべてに疲れました。

乾杯

4

1 に答える 1

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);
    }
});
于 2013-03-28T12:45:49.730 に答える