Add dragging to your div elements. just adding class=”drag” to the div element will make it draggable.

Here i’m adding an example for a draggable dialog box


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HTML>
<HEAD>
<TITLE></TITLE>
<style>
.Text{
font-family: Verdana,Arial,Sans-serif,'Times New Roman';
font-size: 9pt;
font-weight: normal;
font-style: normal;
color: #666;
text-decoration: none;
}

.alertsBoxTitle{
font-family: Verdana,Arial,Sans-serif,’Times New Roman’;
font-size: 9pt;
font-weight: bold;
font-style: normal;
color: #ffffff;
text-decoration: none;
}
.alertsBox{
background: #ECF1F9;
border: 1px #a1bcdf solid;
}
body{
overflow:hidden;
}
</style><script language=”javascript”>
//browser detection
var agt=navigator.userAgent.toLowerCase();
var is_major = parseInt(navigator.appVersion);
var is_minor = parseFloat(navigator.appVersion);

var is_nav = ((agt.indexOf(‘mozilla’)!=-1) && (agt.indexOf(‘spoofer’)==-1)
&& (agt.indexOf(‘compatible’) == -1) && (agt.indexOf(‘opera’)==-1)
&& (agt.indexOf(‘webtv’)==-1) && (agt.indexOf(‘hotjava’)==-1));
var is_nav4 = (is_nav && (is_major == 4));
var is_nav6 = (is_nav && (is_major == 5));
var is_nav6up = (is_nav && (is_major >= 5));
var is_ie = ((agt.indexOf(“msie”) != -1) && (agt.indexOf(“opera”) == -1));

var dragapproved=false
var z,x,y
var maxleft,maxtop,maxright,maxbottom;

function setdragBounds(){
//you can set the bounds of the draggable area here
maxleft = 10;
maxtop = 10;
maxright = document.body.clientWidth – 10;
maxbottom = document.body.clientHeight – 100;
}

function move(e){
var tmpXpos = (!is_ie)? temp1+e.clientX-x: temp1+event.clientX-x;
var tmpYpos = (!is_ie)? temp2+e.clientY-y : temp2+event.clientY-y;
if (dragapproved){
z.style.left = tmpXpos;
z.style.top = tmpYpos;

if(tmpXpos < maxleft)z.style.left = maxleft;
if(tmpXpos > maxright)z.style.left = maxright;

if(tmpYpos < maxtop)z.style.top = maxtop;
if(tmpYpos > maxbottom)z.style.top = maxbottom;
return false
}
}

function drags(e){
if (!(is_ie)&&!(!is_ie))
return
var firedobj=(!is_ie)? e.target : event.srcElement
var topelement=(!is_ie)? “HTML” : “BODY”

while (firedobj.tagName!=topelement && firedobj.className!=”drag” && firedobj.tagName!=’SELECT’ && firedobj.tagName!=’TEXTAREA’ && firedobj.tagName!=’INPUT’ && firedobj.tagName!=’IMG’){
//here you can add the elements that cannot be used for drag . using their class name or id or tag names
firedobj=(!is_ie)? firedobj.parentNode : firedobj.parentElement
}

if (firedobj.className==”drag”){
dragapproved=true
z=firedobj
var tmpheight = z.style.height.split(“px”)
maxbottom = (tmpheight[0])?document.body.clientHeight – tmpheight[0]:document.body.clientHeight – 20;

temp1=parseInt(z.style.left+0)
temp2=parseInt(z.style.top+0)
x=(!is_ie)? e.clientX: event.clientX
y=(!is_ie)? e.clientY: event.clientY
document.onmousemove=move
return false
}
}
document.onmousedown=drags
document.onmouseup=new Function(“dragapproved=false”)

</script>
</HEAD>

<BODY>
<div id=”Dialog” style=”width:316px;height:119px;max-width:316px;position:absolute;top:50px;left:140px; z-index:1000;” class=”drag”>
<table width=”100%” style=”width:315px;height:119px” cellspacing=”0″ cellpadding=”0″ class=”alertsBox” id=”dialog_table”>
<tr style=”cursor:move”>
<td class=”alertsBoxTitle notselectable” colspan=”2″ align=”left” height=”21″ style=”cursor:move;background-color:#32426F”>Drag Me</td>
</tr>
<tr>
<td align=”center” colspan=”2″ height=”5″> </td>
</tr>
<tr>
<td align=”center” colspan=”2″>
<table width=”97%” border=”0″ cellspacing=”0″ cellpadding=”0″ align=”center”>
<tr>
<td valign=’top’ align=”center”>
</td>
</tr>
<tr>
<td valign=’top’ colspan=”2″ class=”Text”>You can place text here</td>
</tr>
<tr>
<td valign=’top’ colspan=”2″ align=”center”><br/><input type=”button” value=”Ok”/></td>
</tr>
</table></td>
</tr>
</table>
</div>
</BODY>
</HTML>

you can set the area in which the div(s) can be dragged using setdragBounds function

Be Sociable, Share!