Quick Search:
CODE
Oracle PL/SQL Code Library
JOBS
Find Or Post Oracle Jobs
FORUM
Oracle Discussion & Chat
 JavaScript: Drag And Drop Example Jump to:  
Category: >> JavaScript >> Drag And Drop Example Bookmark and Share

<< lastnext >>

Snippet Name: Drag And Drop Example

Description: Simple, easy-to-modify drag and drop code.

Comment: (none)

Language: JAVASCRIPT
Highlight Mode: JAVASCRIPT
Last Modified: February 27th, 2009

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Simple Drag and Drop</title>
 
<script type="text/javascript">
	VAR IE = document.all?TRUE:FALSE;
	IF (!IE) document.captureEvents(Event.MOUSEMOVE);
	document.onmousemove = getMouseXY;
	VAR tempX = 0;
	VAR tempY = 0;
	VAR clicked = 0;
	VAR rclicked = 0;
	VAR diffX = 0;
	VAR diffY = 0;
	VAR diffRX = 0;
	VAR diffRY = 0;
	VAR origH = 0;
	VAR origW = 0;
	VAR box = 0;
	VAR boxR = 0;
 
	FUNCTION getMouseXY(e){
	  IF(IE){
		tempX = event.clientX + document.body.scrollLeft;
		tempY = event.clientY + document.body.scrollTop;
	  }ELSE{
		tempX = e.pageX;
		tempY = e.pageY;
	  }  
	  IF (tempX < 0){tempX = 0;}
	  IF (tempY < 0){tempY = 0;}  
	  RETURN TRUE;
	}
	FUNCTION Drag(yesno, boxID){
		clicked = yesno;
		IF(yesno){
			box = document.getElementById(boxID);
			diffY = tempY - parseInt(box.style.top);
			diffX = tempX - parseInt(box.style.left);
		}
	}
	FUNCTION Resize(yesno, boxobj){
		rclicked = yesno;
		IF(yesno){
			boxR = boxobj;
			diffRY = tempY;
			diffRX = tempX;
			origH = boxR.style.height;
			origW = boxR.style.width;
		}
	}	
	FUNCTION DragResize(){		
		IF(clicked == 1){
			box.style.top = (tempY - diffY) + 'px';
			box.style.left = (tempX - diffX) + 'px';
		}
		ELSE IF(rclicked == 1){
			boxR.style.height = parseInt(origH) + (tempY - diffRY) + 'px';
			boxR.style.width = parseInt(origW) + (tempX - diffRX) + 'px';
		}
	}
</script>
<style type="text/css">
	.border 
	{
		position: absolute;
		cursor: se-resize;
		background: #ccc;
		border: 1px solid #000;
		z-index: 5;	
		padding: 3px;
	}
 
	.block{
		cursor: default;		
		background: #ccc;
		width: 100%;
		height: 100%;
		z-index: 10;
	}
</style>
 </head>
 
 <body onmousemove="DragResize()">	
 
	<!-- Start Row 1 -->
	<div id="box1" class="border" style="top:100px;left:100px;height:50px;width:50px;" onmousedown="Resize('1',this);" onmouseup="Resize('0',this);"><div class="block" onmousedown="Drag('1','box1');" onmouseup="Drag('0','box1');"></div></div>
	<div id="box2" class="border" style="top:100px;left:160px;height:50px;width:50px;" onmousedown="Resize('1',this);" onmouseup="Resize('0',this);"><div class="block" onmousedown="Drag('1','box2');" onmouseup="Drag('0','box2');"></div></div>
	<div id="box3" class="border" style="top:100px;left:220px;height:50px;width:50px;" onmousedown="Resize('1',this);" onmouseup="Resize('0',this);"><div class="block" onmousedown="Drag('1','box3');" onmouseup="Drag('0','box3');"></div></div>
	<!-- End Row 1 -->
 
 
	<!-- Start Row 2 -->
	<div id="box4" class="border" style="top:160px;left:100px;height:50px;width:50px;" onmousedown="Resize('1',this);" onmouseup="Resize('0',this);"><div class="block" onmousedown="Drag('1','box4');" onmouseup="Drag('0','box4');"></div></div>
	<div id="box5" class="border" style="top:160px;left:160px;height:50px;width:50px;" onmousedown="Resize('1',this);" onmouseup="Resize('0',this);"><div class="block" onmousedown="Drag('1','box5');" onmouseup="Drag('0','box5');"></div></div>
	<div id="box6" class="border" style="top:160px;left:220px;height:50px;width:50px;" onmousedown="Resize('1',this);" onmouseup="Resize('0',this);"><div class="block" onmousedown="Drag('1','box6');" onmouseup="Drag('0','box6');"></div></div>
	<!-- End Row 2 -->
 
 
	<!-- Start Row 3 -->
	<div id="box7" class="border" style="top:220px;left:100px;height:50px;width:50px;" onmousedown="Resize('1',this);" onmouseup="Resize('0',this);"><div class="block" onmousedown="Drag('1','box7');" onmouseup="Drag('0','box7');"></div></div>
	<div id="box8" class="border" style="top:220px;left:160px;height:50px;width:50px;" onmousedown="Resize('1',this);" onmouseup="Resize('0',this);"><div class="block" onmousedown="Drag('1','box8');" onmouseup="Drag('0','box8');"></div></div>
	<div id="box9" class="border" style="top:220px;left:220px;height:50px;width:50px;" onmousedown="Resize('1',this);" onmouseup="Resize('0',this);"><div class="block" onmousedown="Drag('1','box9');" onmouseup="Drag('0','box9');"></div></div>	
	<!-- End Row 3 -->
 
 </body>
</html>


Free
Oracle Magazine
Subscriptions
and Oracle White Papers


SQL University.net courses meet the most demanding needs of the business world for advanced education in a cost-effective manner. SQL University.net courses are available immediately for IT professionals and can be taken without disruption of your workplace schedule or processes.

Compared to traditional travel-based training, SQL University.net saves time and valuable corporate resources, allowing companies to do more with less. That's our mission, and that's what we deliver.

Click here to find out more
 
Home      :      Code Library      :      Sponsors      :      Privacy      :      Terms of Use      :      Contact Us 87 users online    © 2009 psoug.org

PSOUG LOGIN
Username: 
Password: 
Forgot your password?