<html><head><!--		
		JavaScript Drag and Drop Elements.
		Author:		Neville Bonavia
		Date:			14th May 2006
		Web:			http://itopics.eyethroughtheweb.com
		Description:	This JavaScript class is an illustration to show how to implement Drag and Drop elements.
					Please feel free to use this class but at least, put a link to my web site
							http://itinfo.eyethroughtheweb.com
					in your web site to add my list of back-links.  Hope you find my articles interesting.
					
					Thank You
	--><title>Drag and Drop Demonstration</title>

	
	
	<style type="text/css">
		body
		{
			margin:0px;
		}
		
		/*Style Sheet for the 1st Drag and Drop DIV element*/
		div#mover
		{
			position:absolute;
			background-color:white;
			display:inline;
			z-index:1;
		}
		
		div#mover table
		{
			border-style:solid;
			border-color:black;
			border-width:1px;
			padding:1px;
		}
		
		div#mover table tbody tr th
		{
			background-color:gray;
			color:white;
		}
		
		/*Style Sheet for the 2nd Drag and Drop DIV element*/
		div#mover2
		{
			position:absolute;
			left:200px;
			background-color:black;
			display:inline;
			z-index:1;
		}
		
		div#mover2 table
		{
			border-style:solid;
			border-color:white;
			border-width:1px;
			padding:1px;
			color:white;
		}
		
		div#mover2 table tbody tr th
		{
			background-color:gray;			
			color:white;
		}
	</style>
	
	<script language="javascript" type="text/javascript">		
		var movingobject = null;
		var mouseX = 0;
		var mouseY = 0;
				
		//Function that accepts an 'event object' and determines the mouse's position.
		//The respective positions are then consecutively set up in variable mouseX and mouseY respectively
		function determineMousePosition(e)
		{
			//Determine the mouse cursor's X-position
			//Determine the mouse cursor's X-position
			mouseX = (document.all)?
				e.clientX + document.body.scrollLeft:
				e.clientX + window.pageXOffset;
			
			//Determine the mouse cursor's Y-position
			mouseY = (document.all)?
				e.clientY + document.body.scrollTop:
				e.clientY + window.pageYOffset
		}
		
		function startmove(e,element)
		{			
			determineMousePosition(e);			
			element._offsetX = mouseX - element.offsetLeft;
			element._offsetY = mouseY - element.offsetTop;
			element._zIndex = element.style.zIndex;
			
			element.style.zIndex=1000;
			
			//Registering the element as the object being moved
			movingobject = element;
		}
		
		function endMove()
		{
			if (null != movingobject)
			{
				movingobject.style.zIndex = movingobject._zIndex;
				movingobject = null;
			}
		}
		
		function moveobject(e)
		{
			//If the moving object is not null, then move the element.
			if (null != movingobject)
			{
				determineMousePosition(e);
				movingobject.style.top = mouseY - movingobject._offsetY;
				movingobject.style.left = mouseX - movingobject._offsetX;
			}
		}
	</script></head><body onmousemove="moveobject(event);" onmouseup="endMove();" onselect="return false;" onselectstart="return false;">

	<div style="cursor: default; top: 80px; left: 479px; z-index: 1000;" id="mover" onmouseover="this.style.cursor='move';" onmouseout="this.style.cursor='default';" onmousedown="startmove(event,this);" onmouseup="endMove();">
		
		<table cellpadding="0" cellspacing="0">
		<tbody>
			<tr>
				<th>Column1</th>
				<th>Column2</th>
				<th>Column3</th>
			</tr>
			<tr>
				<td>text
				</td><td>text
				</td><td>text
			</td></tr>
			<tr>
				<td>text
				</td><td>text
				</td><td>text
			</td></tr>
			<tr>
				<td>text
				</td><td>text
				</td><td>text
			</td></tr>
			<tr>
				<td>text
				</td><td>text
				</td><td>text
			</td></tr>
		</tbody>
		</table>
	
	</div>
	
	<div style="cursor: default; top: 77px; left: 273px;" id="mover2" onmouseover="this.style.cursor='move';" onmouseout="this.style.cursor='default';" onmousedown="startmove(event,this);" onmouseup="endMove();">
		
		<table cellpadding="0" cellspacing="0">
		<tbody>
			<tr>
				<th>Column1</th>
				<th>Column2</th>
				<th>Column3</th>
			</tr>
			<tr>
				<td>text
				</td><td>text
				</td><td>text
			</td></tr>
			<tr>
				<td>text
				</td><td>text
				</td><td>text
			</td></tr>
			<tr>
				<td>text
				</td><td>text
				</td><td>text
			</td></tr>
			<tr>
				<td>text
				</td><td>text
				</td><td>text
			</td></tr>
		</tbody>
		</table>
	
	</div>
</body></html>
