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 div
s 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 div
s. For that, we can use JavaScript frameworks like Rico, script.aculo.us, moo.fx etc., but for only adding the draggable feature for div
s, 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 div
s, 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>
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 div
s, 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.