Snippets

Home / Snippets / Draggable Divs

Draggable Divs

Snippet Menu

snippet |

revisions |

comments | Related Snippets

related |

Add to Favorites | Email

download | Print

print | Blog It

blog it

Mon. Oct. 9th, 2006 3:36 AM

1 of 1

sundaramkumar

JavaScript

4 comments

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'){

                        //you can add the elements that cannot be used for drag here. 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