Draggable Windows Using Javascript

This is a POC similar to the Google’s Personal Homepage.

Drag Me
The core JavaScript language has matured.
It has been standardized and is used in a wider variety of environments than it was previously.
The collapse of Netscape’s market share has allowed the universe of desktop web browsers to expand,
and JavaScript-enabled web browsers have also become available on non-desktop platforms.

Some problems for this on Firefox due to wordpress.
Click here to open the example.


And the code is.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<style>
.dragWindow
{
	display:block;
}
table.dragWindowTable
{
	border: 1px solid orange;background-color: #FFDECE;font:10px verdana;
}
td.dragWindowTableHeader
{
	background-color: #FFB591;
	cursor: move;
	-moz-user-select:none;
	user-select:none;
	text-align: left;
}
</style>
</HEAD>
<BODY>
<script type="text/javascript">
<!--
// Window Drag 0.1 Proof Of Concept - Google Personal Homepage
// THE SCRIPT IS UNDER GNU/GPL.
// http://shivprasad.wordpress.com/
// Tested on IE6 and Firefox 1.x

	var startX=0;		// Holds the window's start X position
	var startY=0;		// Holds the window's start Y position
	var endX=0;			// Holds the current dragged window's X position
	var endY=0;			// Holds the current dragged window's Y position
	var tmpX=0,tmpY=0;
	var animCount=0;
	var level=5;
	var isDrag=false;
	var dragElement='';


	function findY(obj)
	{
		var y = 0;
		while (obj)
		{
			y += obj.offsetTop;
			obj = obj.offsetParent;
		}
		return y;
	}
	function findX(obj)
	{
		var x = 0;
		while (obj)
		{
			x += obj.offsetLeft;
			obj = obj.offsetParent;
		}
		return x;
	}

	/*
	* This starts the actual drag
	*/
	function beginDrag(e)
	{
		if(isDrag)
		{

			document.body.style.MozUserSelect='none';
			document.body.style.userSelect='none';
			if(typeof e=="undefined")e=window.event;
			document.getElementById("dragWin").style.top=e.clientY;
			document.getElementById("dragWin").style.left=e.clientX;
			document.getElementById("dragWin").innerHTML=dragElement.innerHTML;
			endX=e.clientX;
			endY=e.clientY;
			return false;
		}

	}

	/*
	* This ends the drag
	*/
	function endDrag(e)
	{
		if(isDrag)
		{
			document.body.style.MozUserSelect='text';
			document.body.style.userSelect='text';
			document.onmousemove=null;
			document.onmouseup=null;
			if(typeof e=="undefined")e=window.event;
			moveToOrigin();
			if(Math.abs(endX-startX)>level)
			{
				tmpX=endX-startX;
				tmpX=tmpX/level;
			}
			if(Math.abs(endY-startY)>level)
			{
				tmpY=endY-startY;
				tmpY=tmpY/level;
			}
			isDrag=false;
			return false;
		}
	}

	/*
	* Moves back the dragged window to original position
	*/
	function moveToOrigin()
	{
		if(animCount==level)
			{
				document.getElementById("dragWin").innerHTML='';
				return false;
			}
		animCount++;
		endY=endY-tmpY;
		endX=endX-tmpX;
		document.getElementById("dragWin").style.top=endY;
		document.getElementById("dragWin").style.left=endX;
		window.setTimeout("moveToOrigin()",50);
	}

	/**
	*	Sets the dragging elements and kicks of the drag.
	*/
	function setDragElement(drag,e)
	{
		if(typeof e=="undefined")e=window.event;
		target=(typeof e.target=="undefined")? e.srcElement: e.target;
		if(target.className!="dragWindowTableHeader")
			return false;
		dragElement=drag;
		document.onmousemove=beginDrag;
		document.onmouseup=endDrag;
		startX=findX(dragElement);
		startY=findY(dragElement);
		animCount=0;
		isDrag=true;
		return false;
	}
//-->
</script>
<div id="dragableDiv" class="dragWindow" onmousedown="setDragElement(this,event)">
<table border=0 class="dragWindowTable"  cellpadding="0" cellspacing="0" width="250">
		<tr>
			<td class="dragWindowTableHeader" width="100%">
			<strong>Drag Me</strong>
			</td>
		</tr>
	<tr>
		<td>
			The core JavaScript language has matured.
			It has been standardized and is used in a wider variety of environments than it was previously.
			The collapse of Netscape's market share has allowed the universe of desktop web browsers to expand,
			and JavaScript-enabled web browsers have also become available on non-desktop platforms.
		</td>
	</tr>
</table>
</div>
<div id="dragWin" style="position:absolute;filter:alpha(opacity=80);opacity:0.8;-moz-user-select: none;user-select: none;"></div>
</BODY>
</HTML>







Comments

No comments yet.

Add Yours

  • Author Avatar

    YOU


Comment Arrow




About Author

shiv

This author has not yet written a description. Please give them some time to get acquainted with the site and surely they will write their masterpiece.