JQuery Desplazamiento seleccionable y automático

Question

Estoy intentando que JQuery Sortable funcione, pero me he topado con un ligero problema de usabilidad.

La lista que estoy tratando de ordenar es bastante grande (unos 200 elementos). Si el usuario intenta arrastrar el elemento superior hacia la parte inferior, una vez que el elemento llega al final de la parte visible de la pantalla, la página se desplaza una pequeña cantidad y luego se detiene. Para activar más desplazamiento hacia abajo, debe mover el mouse con movimientos circulares hasta que el elemento llegue al final.

¿Hay algún método para rastrear la posición del mouse mientras se arrastra un elemento y se desplaza automáticamente la pantalla hacia abajo?

Answer 1

Puede desencadenar eventos en función de la posición devuelta por mouseMove. He aquí una explicación sencilla: http://jquery-howto.blogspot.com/2009/07/identifying-locating-mouse-position-in.html

Este tutorial puede ayudar a empezar: http://valums.com/vertical-scrolling-menu/ Y esta guía por el mismo efecto: http://www.queness.com/resources/html/scrollmenu/index.html

Answer 2

me gustaría echar un vistazo en el scroll, scrollSensativity, and scrollSpeed options.

Usted puede hacer algo como:

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

o

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

o incluso

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

Answer 3

Creo que se puede considerar el manejo de desplazamiento externo a ordenar. Sugiero usar el temporizador y el evento 'out' de ordenable.

Aquí es una pieza de código basado en la página de demostración jQueryUI, se puede utilizar como punto de partida, si quiero ir de esta manera: ejemplo

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

Aquí también está trabajando: JSBIN

lo siento
No bloqueé el código de ejemplo y se destruyó incidentalmente. Ahora está de vuelta al trabajo.

Answer 4

Mientras que el valor de la scrollSensitivity controla el comportamiento de desplazamiento cuando el elemento de ayuda se aproxima a un borde (superior o inferior), puede utilizar el evento "tipo" para desplazarse incondicionalmente mientras arrastra si se utiliza el siguiente código:

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

No estoy seguro si esto resuelve completamente el problema que está viendo, pero encontré que la usabilidad con una lista más grande mejora con este enfoque. Aquí hay un link to jsfiddle.

Answer 5

He eliminado overflow-y: scroll de body para resolverlo.

Answer 6

Tenía una mesa sensible con bootstrap, esto no lo dejaba funcionar.

no como este:

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

como esto sí:

<table> 
    ... 
</table> 

y el uso de estas opciones:

scroll, scrollSensitivity, scrollSpeed

Answer 7

B Ased en la respuesta de @marty, aquí hay un código ajustado que: 1. Velocidad de control del desplazamiento 2. Se desplazará hacia abajo y se desplazará hacia arriba sin fallas. velocidad 3. El valor predeterminado es 7px a la vez 4. movimientos de menos de 7px serán ignorados

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