Draggable Divs in JavaScript

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

You can set the area in which the div(s) can be dragged using setdragBounds function.
you can add the elements that cannot be used for drag . Using their class name or id or tag names

View the complete code :

Place this code befofe the head tag :
<br /><br /> <style><br /> .Text{<br /> font-family: Verdana,Arial,Sans-serif,'Times New Roman';<br /> font-size: 9pt;<br /> font-weight: normal;<br /> font-style: normal;<br /> color: #666;<br /> text-decoration: none;<br /> }<br /><br /> .alertsBoxTitle{<br /> font-family: Verdana,Arial,Sans-serif,'Times New Roman';<br /> font-size: 9pt;<br /> font-weight: bold;<br /> font-style: normal;<br /> color: #ffffff;<br /> text-decoration: none;<br /> }<br /> .alertsBox{<br /> background: #ECF1F9;<br /> border: 1px #a1bcdf solid;<br /> }<br /> body{<br /> overflow:hidden;<br /> }<br /> </style><br /><br /> <script language="javascript"><br /> // browser detection<br /> var agt=navigator.userAgent.toLowerCase();<br /> var is_major = parseInt(navigator.appVersion);<br /> var is_minor = parseFloat(navigator.appVersion);<br /><br /> var is_nav = ((agt.indexOf('mozilla')!=-1) && (agt.indexOf('spoofer')==-1)<br /> && (agt.indexOf('compatible') == -1) && (agt.indexOf('opera')==-1)<br /> && (agt.indexOf('webtv')==-1) && (agt.indexOf('hotjava')==-1));<br /> var is_nav4 = (is_nav && (is_major == 4));<br /> var is_nav6 = (is_nav && (is_major == 5));<br /> var is_nav6up = (is_nav && (is_major >= 5));<br /> var is_ie = ((agt.indexOf("msie") != -1) && (agt.indexOf("opera") == -1));<br /><br /> var dragapproved=false<br /> var z,x,y<br /> var maxleft,maxtop,maxright,maxbottom;<br /><br /> function setdragBounds()<br /> {<br /> // you can set the bounds of the draggable area here<br /> maxleft = 10;<br /> maxtop = 10;<br /> maxright = document.body.clientWidth - 10;<br /> maxbottom = document.body.clientHeight - 100;<br /> }<br /><br /> function move(e)<br /> {<br /> var tmpXpos = (!is_ie)? temp1+e.clientX-x: temp1+event.clientX-x;<br /> var tmpYpos = (!is_ie)? temp2+e.clientY-y : temp2+event.clientY-y;<br /> if (dragapproved)<br /> {<br /> z.style.left = tmpXpos;<br /> z.style.top = tmpYpos;<br /><br /> if (tmpXpos < maxleft)<br /> z.style.left = maxleft;<br /><br /> if (tmpXpos > maxright)<br /> z.style.left = maxright;<br /><br /> if (tmpYpos < maxtop)<br /> z.style.top = maxtop;<br /> if (tmpYpos > maxbottom)<br /> z.style.top = maxbottom;<br /><br /> return false<br /> }<br /> }<br /><br /> function drags(e)<br /> {<br /> if (!(is_ie)&&!(!is_ie)) return<br /><br /> var firedobj=(!is_ie)? e.target : event.srcElement<br /> var topelement=(!is_ie)? "HTML" : "BODY"<br /><br /> while (firedobj.tagName!=topelement && firedobj.className!="drag" && firedobj.tagName!='SELECT' && firedobj.tagName!='TEXTAREA' && firedobj.tagName!='INPUT' && firedobj.tagName!='IMG')<br /> {<br /> // here you can add the elements that cannot be used for drag . using their class name or id or tag names<br /> firedobj=(!is_ie)? firedobj.parentNode : firedobj.parentElement<br /> }<br /><br /> if (firedobj.className=="drag")<br /> {<br /> dragapproved = true<br /> z = firedobj<br /> var tmpheight = z.style.height.split("px")<br /> maxbottom = (tmpheight[0])?document.body.clientHeight - tmpheight[0]:document.body.clientHeight - 20;<br /><br /> temp1 = parseInt(z.style.left+0)<br /> temp2 = parseInt(z.style.top+0)<br /> x = (!is_ie)? e.clientX: event.clientX<br /> y = (!is_ie)? e.clientY: event.clientY<br /> document.onmousemove = move<br /><br /> return false<br /> }<br /> }<br /><br /> document.onmousedown=drags<br /> document.onmouseup=new Function("dragapproved=false")<br /> </script><br />

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

Submit Article :- BlinkList + Blogmarks + Digg + Del.icio.us + Ekstreme Socializer + Feedmarker + Furl + Google Bookmarks + ma.gnolia + Netvouz + RawSugar + Reddit + Scuttle + Shadows + Simpy + Spurl + Technorati + Unalog + Wink

Related Posts by Categories

Source Code

• Source Code : .NET Framework Libraries
• Top 10 Windows Forms Articles You Must Read
• [Tutorial-3] Membuat Aplikasi dengan Visual Basic .NET 2008
• [Tutorial] Membuat Aplikasi dengan Visual Basic .NET 2008 - 2
• [Tutorial] Membuat Aplikasi dengan Visual Basic .NET 2008 - 1
• Dynamically Generate Images in Web Pages

Programming

• Cross-platform Apps with PhoneGap and JQuery
• VS 2010 and .NET 4.0 Beta 2
• Microsoft Health Common User Interface (CUI) Controls
• Released : Windows 7 Code Pack V. 1.0
• Expression® Studio 3 Top Features
• Released! Silverlight 3.0 at Microsoft Website

Widget by Hoctro