Question

I am working on a whiteboard application based on Raphael JS. When the paper size is larger than viewable portion of the web page, it adds right and bottom scrollbar. But due to scroll bar i am not getting the correct mouse coordinates. For example if i draw a line (using Raphael) somewhere at bottom right corner by scrolling down the paper, the object is created only at the viewable portion of paper. Which means the coordinate of the mouse and element drawn are not in same place. How to find the offset of x and y coordinates that can me added or subtracted to mouse coordinates to print the element in right place when scrollbar are moved.

Answer 1

I’ve run into this issue doing drag and drop with Raphael before, and it turns out Raphael’s dragMove wrapper contains an excellent example of how to address this problem. In short, you can get the current scroll offset via the scrollLeft and scrollTop members of the document. Take a look at the dragMove function in the uncompressed source — it’s much more straightforward than it looks.