JQuery UI sortable() - listitem перескакивает вверх в Safari и Chrome

У меня есть отсортированный неупорядоченный список в нижней части моей страницы, который отлично работает в 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'
});

Ответы

Ответ 1

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

body { overflow-x: hidden; }

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

Ответ 2

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

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

Ответ 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' });
        }
    }
});

Ответ 4

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

Ответ 5

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

Ответ 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 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);
    }
});

Ответ 7

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