<style>
div{width:100px;height:100px;left:100px;top:100px;position:absolute;border:1px solid gray;overflow:hidden}
.dragAble {position:relative;cursor:move;}</style>
<body onload=makeResizable(odiv1);makeResizable(odiv2);>
   <div id=odiv1></div>
   <div id=odiv2 style="left:300px"  class="dragAble"></div>
</body>
<script>
function makeResizable(obj){
   var d=5;
   var l,t,r,b,ex,ey,cur;
   obj.attachEvent("onmousedown",mdown);
   obj.attachEvent("onmouseup",mup);
   obj.attachEvent("onmousemove",mmove);
   function mdown(){
     if(event.button==1&&obj.style.cursor){
       obj.resizing=true;
       obj.setCapture();
       }
     }
   function mup(){
     if(event.button==1&&obj.resizing){
       obj.resizing=false;
       obj.releaseCapture();
       }
     }
   function mmove(){
     if(obj.resizing){
       var dx=event.screenX-ex;
       var dy=event.screenY-ey;
       if(cur.indexOf("w")>-1) l+=dx;
       else if(cur.indexOf("e")>-1) r+=dx;
       if(cur.indexOf("n")>-1) t+=dy;
       else if(cur.indexOf("s")>-1) b+=dy;
       var s=obj.style;
       if(r-l>2*d){
         s.left=l;
         s.width=r-l;
         }
       if(b-t>2*d){
         s.top=t;
         s.height=b-t;
         }
       ex+=dx;
       ey+=dy;
       }
     else if(event.srcElement==obj){
       var x=event.offsetX,y=event.offsetY;
       var c=obj.currentStyle;
       w=parseInt(c.width),h=parseInt(c.height);
       cur=y<d?"n":h-y<d?"s":"";
       cur+=x<d?"w":w-x<d?"e":"";
       if(cur){
         obj.style.cursor=cur+"-resize";
         l=parseInt(c.left);
         t=parseInt(c.top);
         r=l+w;
         b=t+h;
         ex=event.screenX;
         ey=event.screenY;
         }
       else if(obj.style.cursor)
         obj.style.cursor="";
       }
     }
   }
</script>