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
About Author
Add Yours
YOU