Mise en œuvre du défilement automatique avec l'interface utilisateur JQuery Dragable Widget

Question

Je travaille avec le jQuery UI Draggable widget. Cela fonctionne bien sauf que j'ai maintenant besoin d'ajouter le défilement automatique. C'est, tout en faisant glisser, je veux faire défiler la fenêtre du navigateur lorsque la souris est en haut ou en bas de la fenêtre. J'ai beaucoup d'expérience en faisant des choses comme ça en C et en C + +. Je voudrais définir un drapeau pour indiquer qu'une opération de glisser est en cours. Dans le gestionnaire de message de déplacement de souris, je définirais un minuteur. Et dans le gestionnaire de la minuterie, je ferais défiler la fenêtre dans la direction appropriée. Je voudrais éteindre la minuterie lorsque la souris a quitté la zone "de déclenchement". J'utiliserais une minuterie pour que le défilement soit régulier même si la souris ne bougeait pas.

Quelqu'un peut-il offrir quelques suggestions sur la façon dont je commencerais avec ceci en utilisant jQuery et le widget Draggable? Y a-t-il un gestionnaire de déplacement de souris? Puis-je savoir si la souris est en haut ou en bas de la fenêtre? Et puis-je faire défiler la fenêtre du navigateur? Et qu'en est-il des problèmes de minuterie? Une pensée est d'afficher des superpositions pour les zones «trigger», mais mes compétences jQuery sont quelque peu limitées. Ou, mieux encore, je suis sûr que quelqu'un a déjà fait quelque chose comme ça. Des exemples?

Remarque: Le widget Draggable prend en charge le défilement automatique, mais il fait défiler un élément conteneur. J'ai besoin de faire défiler la fenêtre du navigateur.

EDIT

J'ai essayé de régler l'option de confinement "document", mais il n'a eu aucun effet notable.

$('.drag-handle').draggable({ 
    axis: "y", 
    containment: "document", 
    scroll: true, 
    helper: buildHelper 
}); 

Answer 1

Fondamentalement, il fonctionne avec votre code: http://jsfiddle.net/DgzAH mais l'utilisateur doit toujours se déplacer légèrement la souris pour activer le défilement automatique.

j'ai écrit un code à ce sujet il y a quelques mois pour faire défiler un div lorsque l'élément traîne sans déplacer la souris:

Scroll div when element is dragging without moving mouse

L'idée est de vérifier l'emplacement de l'élément traîné et créer une fonction setInterval lorsque la La position de l'événement de déplacement est située à 70 px de la bordure de mon div. Dans votre cas, l'enveloppe de la page ou directement le body: http://jsfiddle.net/pPn3v/22/