In web development today we use more JavaScript/DOM/CSS/DHTML for rich content and user experience.
While presenting the content/data we may often use divs for division/section in a document. At some time we may need to add drag and drop features or simply dragging feature for our divs. For that we can use JavaScript frameworks like rico, scriptaculous, moo.fx etc. but for the only reason for adding draggable feature for the div do we really need to add those frameworks into our project/site, where size and managing/maintaining code is a matter.
For that I'm using the following code for adding dragging functionality to my divs.
I've found some code in the net and tinkered/added to suit my needs and also removed the complexity of changing the existing code to add dragging feature.
If you have an existing page/site and want to add dragging to the divs there is nothing to change other than the following two steps.
- Include the JavaScript in the page
- Add a simple bit class= "drag" to the existing div
If the div has already a css class then do like this
class="yourexisting_css_class drag"
For Example:
<!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 src="drag.js" type="text/javascript">function Button1_onclick()
{
}
function dialog_table_onclick()
{
}
</script>
</HEAD>
<BODY>
some content here some content here some content here some content here some content here some content here some content here some content here some content here some content here some content here some content here some content here some content here some content here some content here some content here some content here some content here some content here some content here some content here some content here some content here some content here some content here some content here some content here some content here some content here some content here some content here some content here some content here some content here some content here some content here some content here some content here some content here some content here some content here some content here some content here some content here some content here some content here some content here some content here some content here some content here some content here some content here some content here some content here some content here some content here some content here some content here some content here some content here some content here some content here some content here some content here some content here some content here some content here
<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" onclick="return dialog_table_onclick()">
<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" id="Button1" onclick="return Button1_onclick()"/>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</BODY>
</HTML>
Figure 1: Output of the script.
Note:
You can define the bounds of the area in which the div can be dragged. As of now I've done for dragging inside the entire page.
Also you can add any content in the div like image, text etc as we normally do.