Draggable Divs

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

5 Replies to “Draggable Divs”

  1. ?????? ????????? ????? ???? ???????? ? ?????-???? ?????? ?????, ???????, ????? ?????????? ????????
    ??????????????? ????????????? ???????, ??? ?????????, ?????????.?????? ? ????????? ?????
    ??????????? ? ???????? ??????. ???? ?? ???????? ??????? ??? ???????? ? ????? ?????, ????
    ????????? ??? ??????? ????????? ? ???? ????? ???? ?????. ? ????? ????? ??? ??????, ??? ?????? ? ??????????? – ????? ???????? ???????????,
    ??????? ????????. ???? ? ??????, ???????, ???????. ?? ??????? ?????? ??????? ???????????
    ?????????? ????????????. ?????? ????? ??????????????? ????? ? ?????????.
    http://remvk.ru

  2. Nice post. I ussed to bee checking constantly thiss
    blog and I’m inspired! Extremely helpful info particularly the final part 🙂 I maintain such info a lot.
    I was looking for this certain information for a very lengthy time.
    Thank you and best of luck.

  3. ‘ Ice Skating In Rockefeller Center: It doesn’t matter if you are a
    championship ice skater or not just have fun as you ice skate together at the world famous icee skating rink.
    Rather than juggling the timing, transportation, andd guest accommodations, let the hotel see to
    the detyails so you cann enjoy this once-in-a-lifetime event free from the
    stress of endless planning. I am glad to telll you about things to do
    San Francisco.

    Have a look at my bloig … world yacht dinner cruise reviews

Leave a Reply to ????????_33 Cancel reply

Your email address will not be published. Required fields are marked *