Question

I’ve implemented drag and drop using the jQuery UI draggable widget.

I’m now implementing auto scroll during drag operations. I set it up so that when you start to drag, gray overlays appear at the top and bottom of the browser window. When you drag into one of these overlays, the browser window starts to auto scroll.

You can see my test page at http://www.softcircuits.com/Client/scrolltest.html. Drag an item by dragging one of the crosshair icons on the left side.

But there’s a problem: if you scroll to the bottom of the page, and then drag an item to the top overlay, it will scroll up as expected. However, for me, I get about half way up the page and the draggable helper won’t go any higher. There’s no way for me to drag all the way to the top of the page.

This most likely seems related to the Draggable widget. Is anyone able to see why this is happening? I’m using Google Chrome on Windows 7.

Answer 1

Changing the draggable containment option from window to document worked for me.

$('.drag-handle').draggable({ 
    ...
    containment: "document",
    ...
});

See: http://docs.jquery.com/UI/Draggable#option-containment