jQuery UI, Draggable, Droppable, Défilement automatique

Question

J'ai un ensemble d'éléments Li droppable qui accepte une icône déplaçable. La liste des éléments est dans un élément div scrollable. J'ai mis en place un exemple simple ici: http://www.nerdydork.com/demos/dragscroll/

Je me demande s'il existe un moyen d'auto-défilement de la liste des éléments lorsque vous faites glisser l'élément déplaçable. Par exemple, disons que vous êtes quelque part au milieu, comme http://www.nerdydork.com/demos/dragscroll/#j. Lorsque vous vous approchez du sommet de la div, il commence à défiler vers le haut, lorsque vous approchez du bas de la div, il commence à défiler vers le bas.

Quelqu'un sait-il comment accomplir cela avec jQuery?

MISE À JOUR

Je me rapproche. J'ai créé div divisée sur les parties inférieures & inférieurs de la div conteneur. Lorsque vous passez la souris au-dessus, un autodiagnostic est lancé.

Maintenant, le problème est que lorsque je passe la souris sur la zone inférieure, cela gâche mon traîneau sur les lettres. Cependant, cela semble seulement être un problème avec la zone inférieure de l'autodiagnostic.

Pour voir le bug dont je parle, regardez cette courte vidéo: http://screencast.com/t/JBFWzhPzGfz

Remarquez comment quand il autoscrolls vers le bas, le vol stationnaire est pas sur la bonne lettre. Vers la fin de la vidéo, vous pouvez voir que si vous passez la souris sur la marge de gauche de la liste, elle se réinitialise et semble fonctionner de nouveau.

Answer 1

La définition de l'option "refreshPositions: true" pour le fichier à déplacer entraînera jQuery à recalculer les décalages sur chaque événement de souris. Cela devrait résoudre votre problème.

Answer 2

vous pouvez aussi utiliser une fonction d'intervalle: http://jsfiddle.net/msszhwzf/6/

for (var i = 0; i < 10; i++) { 
    $("#sortableContainer").append('<div class="sortable"></div>'); 
    $("#droppableContainer").append('<div class="droppable"></div>'); 
}; 

var adding = 0 
var scrollInterval = null; 

$("#sortableContainer").sortable({ 
    refreshPositions: true, 
    start: function (e, ui) { 
     scrollInterval = setInterval(function() { 
      var foo = $("#droppableContainer").scrollTop(); 
      $("#droppableContainer").scrollTop(foo + adding); 
     }, 50) 
    }, 
    stop: function (e, ui) { 
     clearInterval(scrollInterval); 
    }, 
    sort: function (e, ui) { 
     var top = e.pageY - $("#droppableContainer").offset().top 
     if (top < 10) { 
      adding = -15 
     } else if (top > $("#droppableContainer").height() - 10) { 
      adding = 15 
     } else { 
      adding = 0 
     } 
    }, 
}); 
$(".droppable").droppable({ 
    hoverClass: "active", 
    accept: ".sortable", 
    drop: function (event, ui) { 
     ui.draggable.remove(); 
    }, 
})