javascript - 非表示の要素が存在する場合、jQuery のソート可能な遅延

Question

非表示の要素が存在する場合、jQuery の並べ替え可能なアイテムが並べ替え可能な要素内の場所を見つけるのに苦労しているという問題があります。次の jsfiddle には、2 つの例があります。最初の例では、6 つの要素があり、そのうち 3 つが非表示になっています (これはソート可能で、動作が遅く感じられ、要素がどこに配置されるかを認識していないように見えます)。2 番目には、6 つの要素があり、どれも隠されていません。最初の例とは異なり、スムーズに所定の位置に移動します。

なぜこれが起こっているのか誰にも分かりますか？おそらくcssの問題のようですが、どこにあるのかわかりません。私は職場でこのような大きな問題を抱えていますが、コードをjsfiddleに単純化しようとしました。

http://jsfiddle.net/e234g/4/

<div class="sortable leftPanels">
    <div class="panel hide">panel 1</div>
    <div class="panel hide">panel 2</div>
    <div class="panel hide">panel 3</div>
    <div class="panel">panel 4</div>
    <div class="panel">panel 5</div>
    <div class="panel">panel 6</div>
</div>
<br /><br />
<div class="sortable leftPanels">
    <div class="panel">panel 1</div>
    <div class="panel">panel 2</div>
    <div class="panel">panel 3</div>
    <div class="panel">panel 4</div>
    <div class="panel">panel 5</div>
    <div class="panel">panel 6</div>
</div>

.panel{
    background-color:#eee;
    display:inline-block;
    margin:5px;
}

.sortable{
    padding: 10px;
    padding-top:15px;
    background-color:#999;
    list-style-type: none;
    height:50px;
}

.panel-placeholder{
    background-color:#333;
    display:inline-block;
}
.hide{
    display:none;
}

$(".sortable").sortable({
    placeholder: 'panel-placeholder',
    start: (event, ui) ->
        $('.panel-placeholder').width(ui.item.width()).height(ui.item.height())            
}).disableSelection();

助けてくれてありがとう