Hello everyone I need your help yet again! I have been working on a drag and drop script seem to be working pretty good except for a few bugs! Firstly if you grab the objects and try to move it for some reason the mouse slips of the element from time to time even though the button has not been clicked! This could just be my mouse but however I highly doubt this because it happens with no other drag and drop script! Secondly I am unable to use it with multiple objects or elements and I cant think of how I would go about doing this I think it has to do with the zindex of the elements I am not sure kind of puzzlled? For some reason I can only drag the first element! Thank again!

Code:
<html>
<head>
<script type="text/javascript">
<!--
function dragThis(obj){
	var clked = false, x_pos, y_pos, ele=document.getElementById(obj);
		ele.onclick=function()
		{
		     clked = ( clked ) ? false : true;
		     x_pos = event.clientX - event.srcElement.style.pixelLeft;
		     y_pos = event.clientY - event.srcElement.style.pixelTop;
		}
		ele.onmousemove=function()
		{
		      if( clked )
	 	      {
		            event.srcElement.style.pixelLeft = event.clientX - x_pos;
		            event.srcElement.style.pixelTop = event.clientY - y_pos;
		      }
		 }
}
window.onload=function(){
	new dragThis("dragger1");	
	new dragThis("dragger2");
	}
-->
</script>
</head>
<body>
<div style="background-color:black; color:white; width:150px; height:100px; position:absolute; 
top:0; left:0; cursor:hand;" id="dragger1">
Click me to drag <br>
Click Again To Stop
</div>

<div style="background-color:black; color:white; width:150px; height:100px; position:absolute; 
top:200; left:200; cursor:hand;" id="dragger2">
Click me to drag <br>
Click Again To Stop
</div>

</body>
</html>