jQuery sortable lags, когда скрытые элементы присутствуют

У меня проблема, когда сортируемые элементы jQuery пытаются найти свое место в сортируемом элементе, если есть скрытые элементы. В следующем jsfiddle есть 2 примера. Во-первых, есть 6 элементов, из которых 3 скрыты (это сортировка, которая кажется вялой и не похожа на элементы, которые знают, где разместить себя). Во втором - 6 элементов, ни одна из которых не скрыта. Они будут двигаться плавно на месте, в отличие от первого примера.jQuery sortable lags, когда скрытые элементы присутствуют

Кто-нибудь знает, почему это может произойти? Кажется, что это, вероятно, проблема 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();

Спасибо за помощь

источник

2013-08-14 Cody

Я действительно кажется, не испытывать каких-либо проблем рендеринга вообще. – DevlshOne

http://jsfiddle.net/e234g/5/ Попробуйте этот. Вы можете видеть, что когда вы перетаскиваете одну из сортируемых, она значительно менее плавная. – Cody

Проверьте свою консоль ... есть ошибка – Dom

Я, кажется, решили проблему с обходного не должны использовать дисплей: нет , Создайте этот скрытый класс и добавьте или удалите его, чтобы переключить видимость.

.hidden { 
    width:0px !important; 
    overflow:hidden; 
    visibility:hidden; 
    display: block !important; 
}

Если вы используете .toggle() или в моем случае .fadeToggle() он будет автоматически установлен дисплей нет. Чтобы исправить это, вы можете сделать что-то вроде следующего, чтобы исправить это. Имейте в виду .toggle() добавит отображение в более высокую специфичность css, поэтому вам придется переопределить его в скрытом классе.

panelVisible = viewModel.panelIsVisible(panelName) 
currentlyVisible = $(element).is(":visible") and $(element).css('visibility') is 'visible' 

unless panelVisible is currentlyVisible 
    if not currentlyVisible 
    $(element).removeClass('panel-hidden') 
    $(element).fadeToggle panelVisible,() => 
    if not panelVisible 
     $(element).addClass('panel-hidden')

источник

2013-08-14 20:02:16 Cody

jQuery sortable lags, когда скрытые элементы присутствуют

ответ

Смежные вопросы