<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Tarek Mahmud Apu : Sample Drag`n Drog Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.widget {
height:200px;
width:300px;
position:absolute;
border:1px outset #006666;
border-right:1px inset #006666;
border-bottom:1px inset #006666;
background:#E0E0E0;
}
#dragit {
height:20px;
position:relative;
background: #006666;
cursor:move;
}
#box1 {
height:200px;
width:300px;
position:absolute;
border:1px solid red;
background:#E0E0E0;
cursor:move;
}
</style>
<script type="text/javascript">
function dragObj(element, target)
{
var objToDrag = (target) ? target : element;
var dx, dy;
// stop dragging and remove event
function enddrag()
{
document.onmouseup = null;
document.onmousemove = null;
}
//drag
function drag(e)
{
e = e || window.event;
objToDrag.style.top = (e.clientY - dy) + ‘px’;
objToDrag.style.left = (e.clientX - dx) + ‘px’;
}
// initiate the drag
function initDrag(e)
{
e = e || window.event;
dx = Math.abs(parseInt(objToDrag.style.left) - e.clientX);
dy = Math.abs(parseInt(objToDrag.style.top) - e.clientY);
document.onmouseup = enddrag;
document.onmousemove = drag;
return false;
}
element.onmousedown = initDrag;
}
window.onload = function()
{
new dragObj(document.getElementById(‘box1′));
new dragObj(document.getElementById(‘dragit’), document.getElementById(‘dragit’).parentNode);
}
</script>
</head>
<body>
<h2 align="center" >Simple Drag and Drop Examples</h2>
<h6 align="center"><a href="http://www.apueee.com">www.apueee.com</a></h6>
<div id="box1" style="left:100px;top:100px;"> Drag Me </div>
<div class="widget" style="left:200px;top:200px;">
<div id="dragit"> Drag it </div>
<div style=" text-align:center; padding-top:50px;position:relative;color:#000"> Lorem ipsam… … </div>
</div>
</body>
</html>
