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

Question

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

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

Есть ли способ отслеживания положения мыши, когда он перетаскивает элемент и автоматически прокручивает экран вниз?

Answer 1

Вы можете инициировать события на основе позиции, возвращаемой 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

Answer 2

Я хотел бы взглянуть на scroll, scrollSensativity, and scrollSpeed options.

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

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

или

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

или даже

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

Answer 3

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

Вот кусок кода, основанный на 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

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

Answer 4

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

$(".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); 
    } 
}); 

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

Answer 5

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

Answer 6

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

не нравится:

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

как этот да:

<table> 
    ... 
</table> 

и использовать эти опции:

scroll, scrollSensitivity, scrollSpeed

Answer 7

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

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); 
     } 
    });