左右拖动

left DIV

right DIV

<script language="javascript"> var l = document.getElementById("left"); var r = document.getElementById("right"); var bar = document.getElementById("bar"); var move=false; var offsetL,offsetR,LlastWidth,RlastWidth; var leftL = getLeft( l ); var rightL = getLeft( r ) + r.offsetWidth; bar.οnmοuseοver=function(){ this.style.cursor = "col-resize"; } bar.οnmοuseοut=function(){ this.style.cursor = "default"; } bar.οnmοusedοwn=function(){ this.setCapture(); move=true; offsetL = event.offsetX; offsetR = this.offsetWidth - offsetL; //alert( "event.x="+event.offsetX ); } bar.οnmοusemοve=function(){ if( !move ) return; left.style.width = event.x - leftL - offsetL + "px"; right.style.width = rightL - event.x - offsetR + "px"; } bar.onmouseup = function(){ this.releaseCapture(); move = false; } function getLeft(e) { var l = e.offsetLeft; while(e=e.offsetParent)l+=e.offsetLeft; return l; } </script> <script language="javascript"> var oL,oT,oW,oH; var oMX,oMY; var obj,element; var minW=100; var maxW=500; var resizable=false; function doMove(e){ if(!e)e=window.event; obj=e.srcElement || e.target; var mX=e.pageX || e.clientX; if(resizable){ w=oW; w=oW + mX - oMX; //tt.value=event.clientX; if(w maxW){w=maxW;} ResizeTo(w); return(true); } var cc=""; if(obj.title && obj.title=="oWin"){ l=0; w=parseInt(obj.offsetWidth); if(Math.abs(l+w-mX)<5)cc+="e"; if(cc!=""){ obj.style.cursor=cc+"-resize"; return(true); } } if(obj.style.cursor!="default"){ obj.style.cursor="default"; } } function doDown(e){ if(obj.style.cursor!="default"){//开始改变大小 //记录鼠标位置和层位置和大小; if(!e)e=window.event; obj=e.srcElement || e.target; element=obj; oMX=e.pageX || e.clientX; oW=parseInt(element.offsetWidth); //改变风格; resizable=true; return(true); } } function doUp(){ if(resizable){ element.style.cursor="default"; resizable = false; return(false); } } function ResizeTo(w){ var w=isNaN(w)?minW:parseInt(w); var w=w <script language="javascript"> document.οnmοusemοve=doMove; document.οnmοusedοwn=doDown; document.οnmοuseup=doUp; </script>