drag and drop window not screen

I have a page setup where folks drag and drop boxes with names on them. It works fine on one screen but if you scroll down the x and y cooridinates kinda start anew and it throws things off.
Meaning, if you printed it out, the page is oh say 4 pages long. The first page is cool and works fine but 2,3,4 are all messed up.

page is here
http://www.footballjoint.com/Teams/CS/dragger.htm

I believe it's a problem with my math but........
then I think I need to add a line of code that sorta says "page is this big" to the browser. I feel this is one of those obvious questions that's right under my nose but .....anyone?

The problem is you did not include the scroll amount.

document.body.scrolltop

I'm not familiar with scrolling function, always used scripts on the web never had to learn.

if x is 100 and y is 200
what do I do just x=x+scrolling amount?

see I thought I'd just somehow tell the browser the screen was bigger. Seems it assumes it's 5-600 high, just somehow tell it this document is 1800 or 2400 high(3-4 pages)

Any thoughts? Thank you for your time

That is the way you would do it.

The scrolltop accounts for all of the space above when you scroll the window down. When you do not use this, then the mouse corrdinates say 400X500 but the element is actually located at 600X500

that is why when you move the piece it jumps to the part of the screen that is hidden

thank you kindly