jQuery UI Sortable - Странное поведение - элементы, падающие с вершины окна при движении

0

У меня очень странное поведение с 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>&gt;</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>&gt;</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 тоже.

Теги:
jquery-ui-sortable

2 ответа

0

Я смог зафиксировать поведение в FF с помощью helper:"clone" опция helper:"clone" для сортировки. Это имеет некоторый путь к фиксации в хроме, но все еще не идеальный

0

Я натолкнулся на что-то похожее на это некоторое время назад и задокументировал здесь: http://blog.ricky-stevens.com/jquery-sortable-offset-bug/, и с тех пор он был обсужден здесь: http://forum.jquery.com/тема/сортируется-офсетный когда-элемент-это-потащил-и-страницы прокручивать вниз-Ф.Ф.

Это может быть связано. Это влияет на сортировку jQuery, если вам нужно прокручивать страницу. Попробуйте настроить свойства scroll-y на теге тела.

  • 0
    К сожалению, это была другая проблема. Однако я заметил, что когда предмет перемещается в новую позицию, он имеет позицию: относительный; слева: 0px; топ: 0px; когда я удаляю это в firebug, я могу перерисовать его из текущей позиции ....

Ещё вопросы

Сообщество Overcoder
Наверх
Меню