JQuery Sortable et défilement automatique

J'essaie d'obtenir JQuery Sortable à travailler, mais j'ai eu un léger problème d'utilisabilité.

La liste que je suis en train de trier est assez grand (environ 200 pièces). Si l'utilisateur tente de faire glisser l'élément du haut à droite vers le bas, une fois que l'élément atteint le bas de la partie visible de l'écran, la page défile une petite quantité, puis s'arrête. Pour déclencher plus de la baisse de défilement, vous devez déplacer la souris en faisant des mouvements circulaires jusqu'à ce que l'élément atteint le fond.

Est il une méthode de suivi de la position de la souris alors que c'est en faisant glisser l'élément et automatiquement faire défiler l'écran vers le bas?

source d'informationauteur Tahir Hassan | 2010-09-17

Je voudrais prendre un coup d'oeil à la faites défiler jusqu', scrollSensativity, et scrollSpeed options.

Vous pouvez faire quelque chose comme:

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

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

ou même

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

6

Alors que la valeur de la scrollSensitivity contrôle le comportement défilement lorsque l'aide de l'élément s'approche d'un bord (en haut ou en bas),
vous pouvez utiliser le bouton "trier" événement sans condition de défilement pendant que vous faites glisser si vous utilisez le code suivant:
```
$(".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);
    }
});
```
Ne sais pas si cela a complètement traite de la question que vous avez vu, mais j'ai trouvé que la facilité d'utilisation avec la plus grande liste s'améliore avec cette approche.
Voici une lien vers le jsfiddle.

Je pense que vous pouvez envisager la manipulation de défilement externe à sortable. Je suggère l'utilisation de la minuterie et le "dehors" de l'événement de triable.

Ici est le morceau de code sur la base de jQueryUI page de démonstration, vous pouvez l'utiliser comme point de départ, si vous voulez aller dans cette voie:

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

Ici est aussi de travail exemple: JSBIN

désolé

Je n'ai pas de blocage de code d'exemple et a été détruit d'ailleurs. Maintenant il est de retour au travail.

2

J'ai supprimé overflow-y: scroll de body de le résoudre.
1

J'ai eu un réactif de table avec bootstrap, ce ne serait pas le laisser travailler.

pas comme cela:
```
<div class="table-responsive">
   <table>
      ...
   </table>
</div>
```
comme ça oui:
```
 <table>
   ...
 </table>
```
et l'utilisation de ces options:

faites défiler jusqu'
scrollSensitivity
scrollSpeed

De faire défiler la fenêtre lorsqu'un élément est déplacé à proximité du haut ou du bas.

Je ne pouvais pas obtenir toutes les autres réponses de travail. À l'aide de Chrome et triable grille qui doit faire défiler verticalement lorsqu'un élément est déplacé vers le haut ou le bas de la fenêtre.

REMARQUE: Cela ne fonctionne que pour le défilement de la fenêtre entière. Cela ne fonctionnera pas si vous avez un défilement de section à l'intérieur de la fenêtre et à faire défiler.

J'ai été en mesure d'obtenir les éléments suivants fonctionne parfaitement:

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

Vous pouvez déclencher des événements en fonction de la position renvoyée par mouseMove. Voici un tutoriel simple: http://jquery-howto.blogspot.com/2009/07/identifying-locating-mouse-position-in.html

Ce tutoriel peut vous aider à obtenir commencé: http://valums.com/vertical-scrolling-menu/
Et cette marche à travers le même effet: http://www.queness.com/resources/html/scrollmenu/index.html

@Marty 's réponse, voici une amende à l'écoute de code qui permettra de:
1. Contrôle de la vitesse de défilement
2. Fait défiler vers le bas et faites défiler vers le haut sans pépins.
3. Par défaut, la vitesse est 7px à un moment
4. les mouvements de moins de 7px sera ignorée

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

Vous devez vous connecter pour publier un commentaire.