JQuery сортируемая и автоматическая прокрутка - PullRequest
Новая
       1

JQuery сортируемая и автоматическая прокрутка

14 голосов
/ 18 сентября 2010

Я пытаюсь заставить работать JQuery Sortable, но у меня возникла небольшая проблема с юзабилити.

Список, который я пытаюсь отсортировать, довольно большой (около 200 наименований).Если пользователь пытается перетащить верхний элемент вправо к низу, как только этот элемент достигнет нижней части видимой части экрана, страница прокручивается незначительно, а затем останавливается.Чтобы активировать прокрутку вниз, необходимо перемещать мышь круговыми движениями, пока элемент не достигнет дна.

Существует ли какой-либо метод отслеживания положения мыши при перетаскивании элемента и автоматической прокруткеэкран вниз?

Ответы [ 8 ]

23 голосов
/ 18 сентября 2010

Я бы взглянул на опции scroll, scrollSensativity и scrollSpeed ​​.

Вы можете сделать что-то вроде: 

$("#sort").sortable({ scroll: true, scrollSensitivity: 100 });

или 

$("#sort").sortable({ scroll: true, scrollSpeed: 100 });

или даже 

$("#sort").sortable({ scroll: true, scrollSensitivity: 100, scrollSpeed: 100 });
6 голосов
/ 25 февраля 2014

Хотя значение scrollSensitivity управляет поведением прокрутки, когда вспомогательный элемент приближается к краю (сверху или снизу), вы можете использовать событие «sort» для безусловной прокрутки во время перетаскивания, если вы используете следующий код: 

$(".sortable").sortable({
    scroll: true,
    scrollSensitivity: 80,
    scrollSpeed: 3,
    sort: function(event, ui) {
        var currentScrollTop = $(window).scrollTop(),
            topHelper = ui.position.top,
            delta = topHelper - currentScrollTop;
        setTimeout(function() {
            $(window).scrollTop(currentScrollTop + delta);
        }, 5);
    }
});

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

2 голосов
/ 09 ноября 2016

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

не так: 

<div class="table-responsive">
   <table>
      ...
   </table>
</div>

вот так да: 

 <table>
   ...
 </table>

и используйте эти опции:

перемотать , scrollSensitivity , Scrollspeed

2 голосов
/ 01 августа 2014

Я удалил overflow-y: scroll из body, чтобы решить.

2 голосов
/ 21 февраля 2014

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

Вот фрагмент кода, основанный на демонстрационной странице jQueryUI, вы можете использовать его в качестве начальной точки, если хотите пойти по этому пути: 

$(function() {
   var scroll = '';
   var $scrollable = $("#sortable");
   function scrolling(){
     if (scroll == 'up') {
       $scrollable.scrollTop($scrollable.scrollTop()-20);
       setTimeout(scrolling,50);
     }
     else if (scroll == 'down'){
       $scrollable.scrollTop($scrollable.scrollTop()+20);
       setTimeout(scrolling,50);
     }
   }

   $( "#sortable" ).sortable({
      scroll:false,
      out: function( event, ui ) {
        if (!ui.helper) return;
        if (ui.offset.top>0) {
          scroll='down';
        } else {
          scroll='up';
        }
        scrolling();
      },
      over: function( event, ui ) {
        scroll='';
      },
      deactivate:function( event, ui ) {
        scroll='';
      }
    });
    $( "#sortable").disableSelection(); 
});

Вот также рабочий пример: JSBIN

извините
Я не заблокировал пример кода и был случайно уничтожен. Теперь он вернулся к работе.

1 голос
/ 07 апреля 2018

Окно прокрутки, когда элемент перетаскивается близко к верху или низу.

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

ПРИМЕЧАНИЕ. Это работает только для прокрутки всего окна.Это не будет работать, если у вас есть прокручиваемый раздел внутри окна и вам нужно прокрутить его.

Мне удалось получить следующие работающие без нареканий : 

var currentlyScrolling = false;

var SCROLL_AREA_HEIGHT = 40; // Distance from window's top and bottom edge.

$(".sortable").sortable({
    scroll: true,

    sort: function(event, ui) {

      if (currentlyScrolling) {
        return;
      }

      var windowHeight   = $(window).height();
      var mouseYPosition = event.clientY;

      if (mouseYPosition < SCROLL_AREA_HEIGHT) {
        currentlyScrolling = true;

        $('html, body').animate({
          scrollTop: "-=" + windowHeight / 2 + "px" // Scroll up half of window height.
        }, 
        400, // 400ms animation.
        function() {
          currentlyScrolling = false;
        });

      } else if (mouseYPosition > (windowHeight - SCROLL_AREA_HEIGHT)) {

        currentlyScrolling = true;

        $('html, body').animate({
          scrollTop: "+=" + windowHeight / 2 + "px" // Scroll down half of window height.
        }, 
        400, // 400ms animation.
        function() {
          currentlyScrolling = false;
        });

      }
    }
});

Coffeescript Version 

currentlyScrolling = false
SCROLL_AREA_HEIGHT = 40

sort: (event, ui) ->

  return if currentlyScrolling

  windowHeight = $( window ).height()

  mouseYPosition = event.clientY

  if mouseYPosition < SCROLL_AREA_HEIGHT # Scroll up.
    currentlyScrolling = true
    $( 'html, body' ).animate( { scrollTop: "-=" + windowHeight / 2 + "px" }, 400, () -> currentlyScrolling = false )

  else if mouseYPosition > ( windowHeight - SCROLL_AREA_HEIGHT ) # Scroll down.
    currentlyScrolling = true
    $( 'html, body' ).animate( { scrollTop: "+=" + windowHeight / 2 + "px" }, 400, () -> currentlyScrolling = false )
0 голосов
/ 18 февраля 2018

Основываясь на ответе @marty, здесь приведен тонко настроенный код, который будет: 1. Контролировать скорость прокрутки 2. Прокручивать вниз и прокручивать вверх без сбоев.3. Скорость по умолчанию составляет 7 пикселей за раз 4. Движения менее 7 пикселей будут игнорироваться 

var previousLocation, previousDelta;
    $( ".selector" ).sortable({
        sort: function(event, ui) {
            var currentScrollTop = $(window).scrollTop(),
                topHelper = ui.position.top,
                delta = topHelper - currentScrollTop;
            setTimeout(function() {
                if((delta < 7 && delta >=0) || (delta > -7 && delta <=0))
                    return;
                if(delta > 7){
                    delta = 7;
                    if((topHelper - previousDelta) < previousLocation){
                        delta = (delta * -1);
                    }
                }
                if(delta < -7){
                    delta = -7;
                    if((topHelper - previousDelta) > previousLocation){
                        delta = (delta * -1);
                    }
                }

                $(window).scrollTop(currentScrollTop + delta);
                previousLocation = topHelper; previousDelta = delta;
            }, 5);
        }
    });
0 голосов
/ 18 сентября 2010

Вы можете инициировать события, основываясь на позиции, возвращенной mouseMove.Вот простое руководство: http://jquery -howto.blogspot.com / 2009/07 / identifying-locating-mouse-position-in.html

Это руководство может помочь вам начать работу:http://valums.com/vertical-scrolling-menu/ И это проходит через тот же эффект: http://www.queness.com/resources/html/scrollmenu/index.html

...