Javscript draggable div does not trigger scroll

Question

I have a simple Javascript drag function. You can see it here:

http://jsfiddle.net/XpAyA/12/

The red #dragger div is draggable. It is nested in an overflow scroll div but it doesn't trigger a "scroll" when it gets over the limit. Probably due to the fact that it is positioned absolute. Is there a way yo fix this? Make the scroll happen when it exceeds the limits? Thank you

Answer 1

First of all you have to give the containing div a position:relative. That way the absolutely positioned dragger stays inside of it and can't go over it's borders.

I'm not sure why the scrolling doesn't work, but is there a reason you scripted your dragging function yourself while you do have access to jQuery? There's a powerful function in jQuery called draggable that does exactly what you want.

Answer 2

Here's a version that scrolls http://jsfiddle.net/vcJuF/1/

I removed the inner div, which seemed to help. The scrollbars update now, I think you just need to update your javascript to actually scroll the div as you drag.