<html>
<head>
<style type="text/css">
.DragFrame{    
    position:absolute;    
    border:1px solid #000;    
    overflow:hidden;
}
.header{ 
    height:4px;
    background-color:#00F;
}
.ContentNow{
    font-size:0.7em;
    font-family:arial;
    padding:2px;
    padding-top:5px;
    overflow:hidden;}
.footer{
    position:absolute;
    bottom:-1px;
    border-top:1px solid #000;
    height:4px;
    width:100%;
    font-size:0.8em;
    background-color:red;
}
</style><script type="text/javascript">
var dragObject = false;
var dragheader = false;
var dragfooter = false;
var orignalLength = 0;
function dragHeader(obj,ev)
{
  dragheader = true;  
    dragObject = obj.parentNode;     
    var dragLeft = dragObject.style.left.replace('px','')/1;
    e = ev;
    orignalLength   = e.clientX-dragLeft;
    return false;
}
function dragFooter(obj)
{    
     dragObject = obj.parentNode;     
     dragfooter = true;
     return false;  
}
function mouseUp(e)
{     
    if(!dragObject)return;        
    dragObject = false;    
    dragheader = false;
    dragfooter = false;    
    orignalLength = 0;
}
function mouseMove(e)
{
    if(document.all) e = event;    
        if(!dragObject)return;        
        var dragTop;
        var dragLeft;
        var tmpHeight;
        if( dragfooter )
        {
           dragTop = dragObject.style.top.replace('px','')/1;        
           tmpHeight = e.clientY - dragTop;        
           dragObject.style.height = tmpHeight + 'px';    
        }
        if( dragheader )
        {
           dragTop = dragObject.style.top.replace('px','')/1;                   
           dragLeft = dragObject.style.left.replace('px','')/1;
           //if(orignalLength > e.clientX-dragLeft)
              dragLeft = dragLeft+(e.clientX-dragLeft);       
         //  else
             // dragLeft = dragLeft-(e.clientX-dragLeft);           
           dragObject.style.top = e.clientY + 'px';    
           dragObject.style.left = e.clientX+ 'px';    
        }        
}
</script></head>
<body ><div onmousemove="mouseMove(event)"  onmouseup="mouseUp(event)" style="width:1000px;height:800px" >
  <DIV class="DragFrame" style=" LEFT: 316px; WIDTH: 120px; TOP: 50px; HEIGHT: 103px; BACKGROUND-COLOR: #ffffff">
     <DIV class="header" onmousedown="dragFooter(this)" style="CURSOR: n-resize; BOTTOM: -1px"><SPAN></SPAN></DIV>
     
     <DIV id="resizeTest" class="footer"  onmousedown="dragFooter(this)" style="CURSOR: n-resize; BOTTOM: -1px">
        <SPAN></SPAN>
     </DIV>
  </DIV></div></body>
</html>
现在实现的是拖动下面红色条的,我想下面固定拖动上面蓝色的条。谢谢