jQuery Sortable List - полоса прокрутки подскакивает при сортировке - PullRequest
Новая
       11

jQuery Sortable List - полоса прокрутки подскакивает при сортировке

26 голосов
/ 14 ноября 2009

Я создал демо: http://pastebin.me/584b9a86d715c9ba85b7bebf0375e237

Когда полоса прокрутки находится внизу и вы перетаскиваете элементы для их сортировки, полоса прокрутки поднимается вверх. Похоже, это делается в FF, Safari, Chrome и IE (по крайней мере, IE8).

В Firefox на моем Mac, он делает прыжок вверх, когда полоса прокрутки находится внизу, но также добавляет приятную вспышку ко всему списку. Он просто высвечивает весь список прямо при прокрутке. Я считаю, что если я выясню, что вызывает прокрутку вверх (и если я смогу остановить ее), то мигание также прекратится.

Мне не нравится, когда он подпрыгивает, потому что я нахожу это резким и запутанным. Я знаю, что это немного сложный случай, но я бы хотел исправить это, если бы мог.

Итак, есть ли способ предотвратить его прокрутку? С другой стороны, что заставляет его прокручиваться вверх?

Спасибо

Ответы [ 13 ]

0 голосов
/ 06 мая 2016

Я загружал свои сортируемые дивы VIA Ajax в обертку с автоматической высотой.

Вместо того, чтобы пытаться связать события с сортировкой, я просто установил высоту автоматически при загрузке и изменении списка, а затем установил статическую высоту.

Решение Вита схоже, но я не хотел добавлять ненужные накладные расходы, выполняя это на каждом mousedown и mouseup событии. Вместо этого я просто делаю это, когда список изменяется при загрузке или когда добавляются новые элементы (я использую анимацию slideDown и просто устанавливаю статическую высоту, когда она завершена). 

$("#wrapper").load("list.php",function() {
    $("#wrapper").css({ "height":"auto" });
    $("#wrapper").css({ "height": $("#wrapper").height() });
}

Другие решения не работали для меня, когда я перезагружал данные, поскольку я сделал их сортируемыми только один раз во время загрузки страницы.

Мой список / div изменяется с раскрывающимся списком, поэтому я могу выбирать разные списки, и моя оболочка изменяет размеры соответственно без раздражающего перехода.

Если вам нужно добавить элементы или перезагрузить что-либо, просто бросьте эти две строки кода в функцию и вызовите функцию.

Надеюсь, это кому-нибудь поможет!

0 голосов
/ 30 января 2015

Вот так я решаю проблему. 

   $(".groups").sortable({
    ...
    helper: function(event, ui){
      lastScrollPosition =  $("body").scrollTop();
    },
    start: function(e, ui){
        // avoid scroll jump
        $("body").scrollTop(lastScrollPosition);
    },
   });
0 голосов
/ 15 октября 2013

У меня была эта проблема в Chrome. И все сортируемые div имели фиксированную высоту.

Проблема была в свойстве CSS position: relative этих элементов. Когда div перетаскивали и удаляли из DOM, его координаты были вычислены неправильно из-за относительного положения.

Для сортируемых элементов следует использовать позиционирование

Inherit или absolute.

Страница:
...