Retreiving mouse position inside a div on mousedown?

[UrbanDweller]

Hey,

 

I havent touched mouse events yet and cant find any good tutorials with mouse event etc related syntax.

 

I need to get the mouse x & y position while over a div and be able to move a child div within the parent div with the mouse.

 

<div id="parentDiv">
<div id="childDiv">
</div>
</div>

 

Thanks

[freelance84]

 

This covers what you're after I reckon. Scroll have the way down to see the working example and the code...

 

http://docs.jquery.com/Tutorials:Mouse_Position

 

[UrbanDweller]

Hey man

 

I'm not a fan of jquery when I'm trying to advance my javascript coding but thanks for the link I would be lying if i didnt think of taking that route though if it got too hard.

 

I have go all the mouse positioning figured out inside the required divs and got the div moving using onmousedown function which then fires onmousemove of the div but I cant figure out how to stop the div moving once onmouseup is fired.

 

I dont know how to stop the mousedown & mousemove function from firing after onmouseup event is done any thoughts.

 

Thanks a lot

 

// Mouse events

function eventHandling(){
    var movingDiv = document.getElementById("movingDiv");
    // Mouse move is fired inside downFunction
    movingDiv.onmousedown = downFunction;
    movingDiv.onmouseup = upFunction;

}

window.onload = function(){
eventHandling();
}

 

 

[freelance84]

 

Here is script from a previous job i did which didn't use jquery. You can easily change to suit to a div... just grab or do something with the tempX and tempY co-ords

 

/*capturing the mouse coordinates within the window*/
            var IE = document.all?true:false;
            if (!IE) document.captureEvents(Event.MOUSEMOVE)
            document.onmousemove = getMouseXY;
            var tempX = 0;
            var tempY = 0;
            function getMouseXY(e) {
                if (IE) { // grab the x-y pos.s if browser is IE
                    tempX = event.clientX + document.body.scrollLeft;
                    tempY = event.clientY + document.body.scrollTop;
                }
                else {  // grab the x-y pos.s if browser is NS
                    tempX = e.pageX;
                    tempY = e.pageY;
                }  
                if (tempX < 0){tempX = 0;}
                if (tempY < 0){tempY = 0;}  
            }
            

}