JQuery Sortable and automatic scrolling

Question

I am trying to get JQuery Sortable to work but I have run into a slight usability problem.

The list that I am trying to sort is quite large (about 200 items). If the user tries to drag the top item right to the bottom, once the item reaches the bottom of the visible part of the screen, the page scrolls a tiny amount, then stops. To trigger more downward scrolling, you have to move the mouse in circular motions about until the item reaches the bottom.

Is there any method of tracking the position of the mouse while it is dragging an item and automatically scrolling the screen down?

Answer 1

You can trigger events based on the position returned by mouseMove. Here's a simple tutorial: http://jquery-howto.blogspot.com/2009/07/identifying-locating-mouse-position-in.html

This tutorial might help you get started: http://valums.com/vertical-scrolling-menu/ And this walks through the same effect: http://www.queness.com/resources/html/scrollmenu/index.html

Answer 2

I would take a look at the scroll, scrollSensativity, and scrollSpeed options.

You can do something like:

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

or

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

or even

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