问题
I'm working with the jQuery UI Draggable widget. It's working well except I now need to add auto scroll. That is, while dragging, I want to scroll the browser window when the mouse is at the top or the bottom of the window.
I have a lot of experience doing things like this in C and C++. I would set a flag to indicate that a drag operation is underway. In the mouse move message handler, I would set a timer. And in the handler for the timer, I would scroll the window in the appropriate direction. I would shut down the timer when the mouse left the "trigger" area. I'd use a timer so that scrolling was regular even if the mouse was not moving.
Can anyone offer some suggestions on how I'd get started with this using jQuery and the Draggable widget? Is there a mouse move handler? Can I tell if the mouse is at the top or bottom of the window? And can I scroll the browser window? And what about the timer issues? One thought is to display some overlays for the "trigger" areas, but my jQuery skills are somewhat limited. Or, better yet, I'm sure someone has done something like this already. Any examples?
Note: The Draggable widget has support for auto scroll but it scrolls a container element. I need to scroll the browser window.
EDIT
I tried setting the Containment option to "document" but it had no noticeable effect.
$('.drag-handle').draggable({
axis: "y",
containment: "document",
scroll: true,
helper: buildHelper
});
回答1:
Basically, it is working with your code: http://jsfiddle.net/DgzAH but the user must always slightly move the mouse to activate the auto-scroll.
I wrote some code about that some months ago to scroll a div when element is dragging without moving mouse:
Scroll div when element is dragging without moving mouse
The idea is to check the dragged element location and create a setInterval function when the drag event position is located at 70px of the border of my div. In your case, the page wrapper or directly the body : http://jsfiddle.net/pPn3v/22/
来源：https://stackoverflow.com/questions/14263676/implementing-auto-scroll-with-jquery-ui-draggable-widget