我遇到一个问题,即如果存在隐藏元素,jQuery可排序项目正在努力在可排序元素中找到它们的位置。在下面的jsfiddle中,有两个例子。在第一个中,有6个元素,其中3个被隐藏(这是可以排序的,感觉迟钝,看起来不像元素知道放在哪里)。在第二个中,有6个元素,其中没有一个被隐藏。与第一个例子不同,它们将顺利移动到位。
有谁知道为什么会发生这种情况?看起来这可能是一个CSS问题,但我不确定在哪里。我在工作中有一个更大的问题,但是试图将代码简化为jsfiddle。
<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();
感谢您的帮助
答案 0 :(得分:0)
我似乎用解决方法解决了这个问题,不必使用display:none。创建此隐藏类并添加或删除它以切换可见性。
.hidden {
width:0px !important;
overflow:hidden;
visibility:hidden;
display: block !important;
}
如果您使用.toggle()或在我的情况下使用.fadeToggle()它会自动将display设置为none。要解决此问题,您可以执行以下操作来修复它。请记住.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')