我正在经历jQuery UI可排序的一些非常奇怪的行为。
我正在使用jQuery 1.10.2和jQuery UI 1.10.3。
在FF第一次移动项目时,它工作正常但是在你移动一次之后,当你再次移动它时,它会从窗口顶部跳到并从你的光标下方落下而不是从它的位置剥离。
在Chrome中,无论您之前是否移动过,都会发生这种情况。
这是我的HTML:
<ul class="trackListings" id="trackListings">
<li class="header">
<div class="number">#</div>
<div class="title">Title</div>
<div class="length">Length</div>
<div class="plays">Plays</div>
<div class="adds">Adds</div>
<div class="toggle"></div>
</li>
<li id="369">
<div class="number">1</div>
<div class="title">Test track</div>
<div class="length">1:25</div>
<div class="plays">0</div>
<div class="adds">0</div>
<div class="toggle"><span>></span></div>
<div class="actions">Purchase Link: <input placeholder="e.g iTunes, Amazon etc" value="" type="text"></div>
</li>
<li id="370">
<div class="number">2</div>
<div class="title">Test track 2</div>
<div class="length">1:29</div>
<div class="plays">0</div>
<div class="adds">0</div>
<div class="toggle"><span>></span></div>
<div class="actions">Purchase Link: <input placeholder="e.g iTunes, Amazon etc" value="" type="text"></div>
</li>
</ul>
适当的CSS:
.trackListings{
padding:0;
}
.trackListings li{
line-height: 50px;
display: inline;
display: block;
border-bottom: 1px solid #afb2b4;
position: relative;
font-size: 21px;
color: #000;
transition:.25s linear all;
}
.trackListings li:after{
clear: both;
display: block;
content: " ";
}
.trackListings li div{
float: left;
}
.trackListings li div.number{
text-align: center;
width: 45px;
}
.trackListings li div.title{
width: 465px;
padding-left: 20px;
}
.trackListings li div.length{
width: 110px;
}
.trackListings li div.plays{
width: 100px;
}
.trackListings li div.adds{
width: 210px;
}
.trackListings li div.toggle span{
font-size: 30px;
display: block;
}
.trackListings li.active div.toggle span{
color: #e35b29;
}
.trackListings li div.actions{
display: none;
}
我正在初始化它:
$('#trackListings').sortable({
items: 'li:not(.header)'
});
我已经尝试删除包含div并在lis上设置固定高度。也试过在相对定位的div中进行包装,但这也导致它每次都在FF中发生。
我刚才发现了类似于此的东西,并记录在这里:http://blog.ricky-stevens.com/jquery-sortable-offset-bug/,它已经在这里讨论过:http://forum.jquery.com/topic/sortable-offset-when-element-is-dragged-and-page-scrolled-down-ff
它可能是相关的。如果您必须在页面上滚动,这会影响jQuery Sortable。尝试调整body标签上的scroll-y属性。
我能够通过使用sortable的helper:"clone"
选项来修复FF中的行为。它在某种程度上固定铬,但仍然不完美
我知道这是一个非常古老的,但我今天遇到了这个问题。解决方法是删除:
position: relative;
来自列表项的css。我希望这可以帮助别人。
我知道这是一个非常古老的,但对我来说,通过不使用“revert:true”来修复它。