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..