0

我有一个问题，如果存在隐藏元素，jQuery 可排序项目正在努力在可排序元素中找到它们的位置。在下面的 jsfiddle 中，有 2 个示例。首先，有 6 个元素，其中 3 个是隐藏的（这是感觉迟缓的排序对象，并且元素似乎不知道将自己放置在哪里）。在第二个中，有 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();

谢谢您的帮助

4

1 回答 1

1

我似乎已经通过一种解决方法解决了这个问题，不必使用 display:none。创建此隐藏类并添加或删除它以切换可见性。 

.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-14T20:02:16.490 回答