Javascript mouse position capture

Capturing mouse position on the screen is often needed in creating modern web pages, with better functionality. Here's a small script that captures the mouse position on every mouse move and stores it in a couple of global variables that can be used from anywhere within the page.

//Add an event listener for mouse move, depending on client browser. 
if(document.layers) 
{ 
 document.captureEvents(Event.MOUSEMOVE);
 document.onmousemove = captureMousePosition;
} 
else if(document.all) 
 document.onmousemove = captureMousePosition;
else if(document.getElementById)  
 document.onmousemove = captureMousePosition;

//Declare the variables that will store the coordinates
var xMousePos = 0; //abscissa
var yMousePos = 0; //ordinate

//Capture the position, again depending on client's browser
function captureMousePosition(e) 
{
 if(document.layers) 
 {
  xMousePos = e.pageX;
      yMousePos = e.pageY;
   } 
   else if(document.all) 
   {
  xMousePos = window.event.x+document.body.scrollLeft;
      yMousePos = window.event.y+document.body.scrollTop;
   } 
   else if(document.getElementById) 
   {
  xMousePos = e.pageX;
      yMousePos = e.pageY;
   }
}

This simple script allows us to know where the mouse is and do a lot of stuff according to it, most commonly - move elements around or knowing exactly where the user has clicked. I use this script oftenly and it will mantioned quite often from now on. Actually, I've already used it in some of the old scripts, but decided to separate it and make it available for you on http://enikoloff.info/scripts/mousePos.js You can see an example page here.

Javascript drag and drop

As promised, I got the simple drag and drop script further. Lots of the stuff is still the same, but now we actually drag the element. Most of the new code handles getting the mouse position and moving the element according to it. I even made the dragged item transparent, cause I tought it would be useful to see the content that is under it. I also found a bug in the old script. Instead of using window.onmouseup we must use document.onmouseup to make sure the function works in all browsers. Anyways, the simple script was just an example, now this bug is fixed and everything works cross-browser. I think this script is really usefull, so feel free to put it on your site ;) Here is the javascript code:

//capture the mousemove event and call a function that will get the position of the cursor
if (document.layers) 
{ 
    document.captureEvents(Event.MOUSEMOVE);
    document.onmousemove = captureMousePosition;
} 
else if(document.all || document.getElementById) 
{ 
    document.onmousemove = captureMousePosition;
}

//this variables are used to store the mouse position coordinates
xMousePos = 0; 
yMousePos = 0; 

//this function stores the coordinates into the global variables every time the mouse moves over the page
function captureMousePosition(e) 
{
 if(document.layers) 
 {
  xMousePos = e.pageX;
  yMousePos = e.pageY;
 } 
 else if(document.all) 
 {
  xMousePos = window.event.x+document.body.scrollLeft;
  yMousePos = window.event.y+document.body.scrollTop;
 } 
 else if(document.getElementById) 
 {
  xMousePos = e.pageX;
  yMousePos = e.pageY;
 }
 
 //after we have captured the new mouse position move the dragged element (if there is one) to it 
 if(window.dragged_item)
  moveDraggedItem();
}


//this will store the object that is currently being dragged
var dragged_item = false;

//when the user release the mouse anywhere on the page we need to drop the object.
//creating this global onmouseup event always clears the currently dragged element
document.onmouseup = function()
{
 window.dragged_item = false;
}

//get the element that is being dragged
function get(elmnt)
{
 window.dragged_item = elmnt;
 
 //make the dragged object transparent
 setOpacity(elmnt.id, 50);
}

//drop the element in it's new spot.
function drop(elmnt)
{
 //what we do is access the parent node of the dragged element and remove the element from it.
 //this line works for all objects, no matter if they are part of the whole page (window object) or any other element within the page
 window.dragged_item.parentNode.removeChild(window.dragged_item);
 
 //we won't move the element anymore, so - reset it's position styles
 window.dragged_item.style.position = 'relative';
 window.dragged_item.style.left = 0;
 window.dragged_item.style.top = 0;
 
 //then append the dragged item to it's new parent element
 elmnt.appendChild(window.dragged_item);
 
 //we've droped the element - make it fully visible again
 setOpacity(window.dragged_item.id, 100);
}

//this func changes the opacity of the elements. It makes them transparent. Works in all browsers.
//we will use it to make the dragged element transparent until it is droped.
function setOpacity(id, opacity) 
{
    var object = document.getElementById(id).style;
 
    object.opacity = (opacity / 100);
 object.filter = "alpha(opacity="+opacity+")";
    object.MozOpacity = (opacity / 100);
    object.KhtmlOpacity = (opacity / 100);
}

function moveDraggedItem()
{
 //set the position property to absolute, so we can move the element according to the mouse cursor
 window.dragged_item.style.position = 'absolute';

 //now move it to the mouse coordinates. I add 5 pixels to the bottom right, cause otherwise the
 //onmouseup event on the elements that the dragged one is being droped to, will not work..
 window.dragged_item.style.left = xMousePos+5;
 window.dragged_item.style.top = yMousePos+5;
}

The HTML that is used has not changed a lot, except that we now need to put an id to each element. The id is used in setting the opacity of elements. Here's the HTML I used for testing:

<div onmousedown='get(this);' id='1' style='border: 1px solid #333; width: 50px; height: 50px; background: #f99'></div>
<div onmousedown='get(this);' id='2' style='border: 1px solid #333; width: 50px; height: 50px; background: #9f9'></div>
<div onmousedown='get(this);' id='3' style='border: 1px solid #333; width: 50px; height: 50px; background: #99f'></div>

<div onmouseup='drop(this);' id='a' style='border: 1px solid #333; width: 200px; height: 200px;'></div>

<div onmouseup='drop(this);' id='b' style='border: 1px solid #333; width: 200px; height: 200px'></div>

You can see the new drag and drop script here. Just "save page as..." to get the code, for some reason freehostia (or is it just me?) is having some issues with the rar files i used to upload and I don't have the time to fix it now..