Open Rico Ajax Fix

Originally posted: April 6, 2006

Drag and drop is a popular javascript element that developers can use to make their webpages look cooler or function alot better. Imagine rearranging 125 elements on a page....that would be quite troublesome.

At work I used the Open Rico project handle my drag and drop. I customized my draggables and dropzone. One thing that wasn't apparent to me at the time was scrolling while dragging. The element your dragging follows the mouse but what happens with the dropzone? It doesn't update with the position. This effect is not noticable with a small screen but when the page expands vertically it is noticable. Click here to see their implementation (Drag and Drop Open Rico)

What I had to do to fix this problem is to get the correct range of the box when the code checks for if the element is in a drop zone. Basically I changed most of their code to use RicoUtils.docScrollTop() to get the new vertical position. To get the correct rectangular position I used this simple idea: call absoluteRectangle, this returns the position of the rectangle (or dropzone), now you will add (startingScrollTopPosition - currentScrollTopPosition).

Maybe I am a noob, but everything works perfectly in Firefox and IE, so I am a happy man, but if this could've been done easier, please leave me a comment.