Draggable Divs - CodeProject

Download source code - 1.83 KB

Screenshot - draggabledivs.jpg

Introduction

In web development today, we use more JavaScript/DOM/CSS/DHTML for rich content and user experience.

While presenting content/data, we often use divs for divisions/sections in a document. At some time, we may need to add drag and drop features or simply a dragging feature for our divs. For that, we can use JavaScript frameworks like Rico, script.aculo.us, moo.fx etc., but for only adding the draggable feature for divs, do we really need to add those frameworks into our project/site, where size and managing/maintaining code is important?

Background

A little bit of JavaScript, HTML, and CSS experience will help you in modifying the script to suit your needs.

Using the Code

While working in a client's project, I came across some scripts that worked with IE but not with Firefox, and some with Firefox and not in IE. Finally, I decided to write a script that will work across browsers like IE, Firefox, and Opera. I merged/modified those scripts which we are not working across browsers, and also removed the complexity of changing the existing code to add the dragging feature.

If you have an existing page/site and want to add dragging feature to divs, there is nothing to change other than to do the following two steps:

Include the JavaScript in the page.
Add a CSS class class="drag" to the existing div.

That's all.

If the div already has a CSS class, then do this: class="yourexisting_css_class drag".

// The div with drag feature
<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>

Screenshot - draggabledivs_opera.jpg

Points of Interest

You can define the bounds of the area in which the div can be dragged. As of now, I've implemented dragging inside the entire page. You can change/set the bounds of the draggable area by changing the "setdragBounds" function in the drag.js file.

Also, you can add any content to the div like images, text etc., as we normally do.

You can add this drag feature not just for divs, but also for other HTML elements like images, input boxes etc.

Note

While adding drag feature to a div, clicking anywhere inside the entire div makes it draggable. So I've added some exclusions in the "drag" function.

while (firedobj.tagName!=topelement && firedobj.className!="drag" && 
  firedobj.tagName!='SELECT' && firedobj.tagName!='TEXTAREA' && 
  firedobj.tagName!='INPUT' && firedobj.tagName!='IMG'){

You can add the exclusions here using class names, ID etc. Modify it as per your needs.