Draggable Div

Css For Draggable Panel

<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>

js文件Drag.js

 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;

have a try,Drag following Div

drag me

this is a sample for draggable div