OnMouseMove and referencing a <div id> underneath another <div id>

Hello, I've been writting HTML since last friday and javascript since yesterday. And I'm stuck on my first project.

My functions for mouse_move / up / down all control the movement of a box. So you can click a box and move it anyway. It then snaps to an invisible grid. However there are multiple boxes on the screen so if you move it to a spot where another box already resides, then that box needs to swap places.

This is what the mouse_over function tries to do. When I click the first box it stores the position of that box that was clicked. If I release the mouse button whilst hoovering over another box I want the other box to take the stored positions of the first box.

However what I think is happening is the mouseover function is applying the new position to the box I'm moving, as I guess this is the first layer the mouse is over.

Is there anyway I can reference the layer underneath using onmouseover.

Sorry if this is jibberish.
Thank you very much.




<script language="javascript">
var x;
var y;
var org_top;
var org_left;
var diff_org_top;
var diff_org_left;
var element;
var element2;
var being_dragged = false;
var swap = false;

function mouse_over(ele_name2)
{
if (swap = true)
{
element2 = ele_name2;
document.getElementById(element2).style.top = org_top;
document.getElementById(element2).style.left = org_left;
swap = false;
element2 = null
}
}

function mouse_move(event)
{
x=event.pageX;
y=event.pageY;

if(being_dragged = true)
{
document.getElementById(element).style.top = y-diff_org_top +'px';
document.getElementById(element).style.left = x-diff_org_left +'px';
}
}

function mouse_down(ele_name)
{
being_dragged = true;
swap = false
element = ele_name;
document.getElementById(element).style.cursor = 'move';

org_top = document.getElementById(element).style.top;
org_left = document.getElementById(element).style.left;

diff_org_top = y-org_top.substring(org_top.length-2,org_top);
diff_org_left = x-org_left.substring(org_left.length-2,org_left);
}

function mouse_up()
{
being_dragged = false;

document.getElementById(element).style.cursor = 'auto';
if (x < 317)
{
document.getElementById(element).style.left = Math.floor(x / 316 - 1) * 316 +'px';
}
else
{
document.getElementById(element).style.left = 0+'px';
}
element = null;
swap = true;
}


</script>

Hello, I've been writting HTML since last friday and javascript since yesterday.

Look , the most important thing is Never Quit.
I can see you've beem at this for a while but
don't get discouraged.In a month or two you
will be an old pro like me.

Look , the most important thing is Never Quit.
I can see you've beem at this for a while but
don't get discouraged.In a month or two you
will be an old pro like me.

I have no intention of quitting. If you're a pro, do you know how to answer my question? Or do you need more info?

Or do you need more info?

Oh so , you have been reading in here
and you already know what we need to
know from you ?

Oh so , you have been reading in here
and you already know what we need to
know from you ?

I have no idea what you are trying to say.

If anyone cares this is how I did it;

Made the element I was dragging completely disappear;
document.getElementById(element).style.display = 'none';

Then use the mouse co-ordinates to see if anything was there;
document.elementFromPoint(x,y).id