JQuery UI sortable () - список элементов переходит наверх в Safari и Chrome

Question

В нижней части моей страницы есть сортируемый неупорядоченный список, который отлично работает в Firefox.Однако в Safari / Chrome захваченный элемент списка мгновенно перемещается в верхнюю часть страницы, когда я хочу перетащить его, как будто UL находится в верхней части окна.Кто-нибудь знает, что здесь происходит?

Спасибо.Lex.

Вот код:

HTML (и PHP):

<ul id="list">
    <?
        foreach($downloads as $download)
        {
            echo "<li class='downloads'><a rel='".$download->id."' href='".$base_url."downloads/".$download->id."'>".$download->title."</a></li>";
        }
    ?>
</ul>

CSS:

ul#list {
    padding: 10px 0;
    display: block;
}
ul#list li {
    background: #fff;
    padding: 10px;
    color: #bc1e2c;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    font-weight: bold;
    margin: 10px 0;
    display: block;
}

ul#list li:hover {
    background: #212121;
    color: #fff;
    cursor: move;
}

JS:

$(".alter-content ul#list").sortable({
    update : saveSortorder,
    containment: 'parent'
});

Answer 1

У меня была такая же проблема. Он хорошо работал в Firefox, но продолжал прыгать в Safari и Chrome. Я наконец исправил это, добавив overflow: auto; в несортированный список в моем CSS.

Мне даже не нужно было указывать высоту UL.

Answer 2

Для меня проблема возникла из-за переполнения css на теле:

body { overflow-x: hidden; }

Удаление этой строки полностью решит проблему.

Answer 3

Вот исправление, которое я нашел где-то в сети ... может быть, даже на SO. Работает для меня.

elements.itemList.sortable({
    'start': function (event, ui) {
        //jQuery Ui-Sortable Overlay Offset Fix
        if ($.browser.webkit) {
            wscrolltop = $(window).scrollTop();
        }
    },
    'sort': function (event, ui) {
        //jQuery Ui-Sortable Overlay Offset Fix
        if ($.browser.webkit) {
            ui.helper.css({ 'top': ui.position.top + wscrolltop + 'px' });
        }
    }
});

Answer 4

У меня была точно такая же проблема с сортируемыми элементами, которые прыгали на вершину в Chrome, в то время как тот же код работал в Firefox. Проблема заключалась в том, что содержащий элемент не имел явной высоты. Как только я добавил к нему высоту, предмет больше не прыгал.

Answer 5

Если у вас есть опция «вернуться», просто удалите ее или установите 'вернуть: ложь' в сортируемых вариантах. Меня устраивает. Спасибо.

Answer 6

Похоже, что jQuery UI 1.9.2 решил проблему.

Если вы не можете изменить библиотеку, есть обходной путь, включающий простую операцию полосы прокрутки. Идея проста:

• Сохраняйте предыдущую позицию прокрутки при каждой прокрутке.
• Установите прокрутку назад к предыдущей позиции, когда вы начинаете перетаскивать свой элемент.

Вот, пожалуйста;

var lastScrollPosition = 0; //variables defined in upper scope
var tempScrollPosition = 0;

window.onscroll = function () { // Up to you requirement you may change it to another elemnet e.g $("#YourPanel").onscroll
    clearTimeout($.data(this, 'scrollTimer'));
    $.data(this, 'scrollTimer', setTimeout(function () {
        tempScrollPosition = lastScrollPosition; // Scrolls don't change from position a to b. They cover some numbers between a and b during the change to create a smooth sliding visual. That's why we pick the previous scroll position with a timer of 250ms.
    }, 250));

    lastScrollPosition = $(document).scrollTop(); // Up to you requirement you may change it to another elemnet e.g $("#YourPanel").onscroll
};

$("#YourSortablePanel").sortable({
    start: function (event, ui) {
        $(document).scrollTop(tempScrollPosition);
    }
});

Answer 7

Для меня это происходило, потому что в позиции строки был установлен переход / анимация.Удаление перехода решило проблему.