<style>
#draggable{}{border:1px solid red;position:absolute;
top:10px;left:10px;width:200px;height:140px;z-index:100px;}
#dragHeader
{}{cursor:move;
background-color: #E0DDD5;
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#E0DDD5', EndColorStr='#FFFFFF');
text-align: center;
border-width: 1px;
border-style: none;
padding: 1px 5px 2px 5px;
text-transform: capitalize;
}
#dragContent{}{background-color: #FFFFFF;}
.active{}{border-style:dashed;filter:alpha(opacity=20);cursor:not-allowed;}
.docked{}{border-style:solid;filter:alpha(opacity=100)}
</style>

var dragingObj=null;//dragging object
 var mouseOffset;//store the offset position
 var initPos; //store the inital position of the dragging object
 /**//**********mouseMove******
hanle mouse move event
*************************/
function mouseMove(evt)
{
evt = evt || window.event;
var mousePos = getMousePos(evt);
if(dragingObj){
dragingObj.style.position = 'absolute';
dragingObj.style.top      = mousePos.y - mouseOffset.y;
dragingObj.style.left     = mousePos.x - mouseOffset.x;
return false;
}
}
/**//**********mouseDown******
hanle mouse down event
*************************/
function mouseDown(evt)
{
evt=evt||window.event;
dragingObj=evt.srcElement.parentElement;
dragingObj.className="active";
mouseOffset=getMouseOffset(dragingObj,evt);
initPos = getPosition(dragingObj);
}
/**//**********mouseUp******
hanle mouse up event
**************************/
function mouseUp(evt)
{
if(dragingObj)
{
evt=evt||window.event;
dragingObj.className="docked";
dragingObj=null;
}
}
/**//**********getPosition******
get obj's position
**************************/
function getPosition(e)
{
var left = 0;
var top  = 0;
while(e.offsetParent)
{
left += e.offsetLeft;
top += e.offsetTop;
e = e.offsetParent;
}
left += e.offsetLeft;
top += e.offsetTop;
return {x:left,y:top};
}
/**//**********getMousePos******
get mouse's coordinate
**************************/
function getMousePos(evt)
{
evt=evt||window.event;
return{
x:evt.clientX+document.body.scrollLeft-document.body.clientLeft,
y:evt.clientY+document.body.scrollTop-document.body.clientTop
};
}
/**//**********getMouseOffset******
get offset mouse moved
**************************/
function getMouseOffset(target, evt){
evt = evt || window.event;
var docPos    = getPosition(target);
var mousePos  = getMousePos(evt);
return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y};
}
function dragStart(obj)
{
obj.onmousedown=mouseDown;
}
/**//***add mouse event hander***/
document.onmouseup = mouseUp;
document.onmousemove=mouseMove;