Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Sep 2010
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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.


    Code:
    <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>
    Last edited by RhysGM; 09-03-2010 at 10:51 AM.

  • #2
    Regular Coder
    Join Date
    Aug 2010
    Posts
    945
    Thanks
    19
    Thanked 205 Times in 203 Posts
    Quote Originally Posted by RhysGM View Post
    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.

  • #3
    New Coder
    Join Date
    Sep 2010
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by DaveyErwin View Post
    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?

  • #4
    Regular Coder
    Join Date
    Aug 2010
    Posts
    945
    Thanks
    19
    Thanked 205 Times in 203 Posts

    Question

    Quote Originally Posted by RhysGM View Post
    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 ?

  • #5
    New Coder
    Join Date
    Sep 2010
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by DaveyErwin View Post
    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.

  • #6
    New Coder
    Join Date
    Sep 2010
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •