У меня очень странное поведение с 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 тоже.
Я смог зафиксировать поведение в FF с помощью helper:"clone"
опция helper:"clone"
для сортировки. Это имеет некоторый путь к фиксации в хроме, но все еще не идеальный
Я натолкнулся на что-то похожее на это некоторое время назад и задокументировал здесь: http://blog.ricky-stevens.com/jquery-sortable-offset-bug/, и с тех пор он был обсужден здесь: http://forum.jquery.com/тема/сортируется-офсетный когда-элемент-это-потащил-и-страницы прокручивать вниз-Ф.Ф.
Это может быть связано. Это влияет на сортировку jQuery, если вам нужно прокручивать страницу. Попробуйте настроить свойства scroll-y на теге тела.