拖动table边框，改变table形状，纯javascript代码

 

< html >        
   < head >    
   < title > 1111 </ title >    
   < meta  content ="text/html; charset=gb2312"  http-equiv ="Content-Type" >    
   < style > ...  {...}{    
  box-sizing: border-box; moz-box-sizing: border-box   
  }   
  #testDiv {...}{  
   background-color: buttonface; 
   background-repeat: repeat;     
    background-attachment: scroll; 
    color: #3969A5; 
    height: 300px;     
    left: 30px; 
    overflow: hidden; 
    width: 500; 
    z-index: 2;     
    border: 2px outset white; 
    margin: 0px; 
    padding: 2px;     
    background-position: 0% 50% 
  }   
  body {...}{    
   font-family: Verdana; 
   font-size: 9pt   
  }   
  #innerNice {...}{    
   background-color: white; 
   background-repeat: repeat;   
   background-attachment: scroll;   
   color: #3969A5;   
   height: 100%;   
   overflow: auto;   
   width: 100%;   
   border: 2px inset white;   
   padding: 8px;     
    background-position: 0% 50%   
  }   
   </ style >
         
   < SCRIPT  language =javascript > ...      
  var theobject = null; //This gets a value as soon as a resize start   
    
  function resizeObject() ...{   
   this.el = null; //pointer to the object   
   this.dir = ""; //type of current resize (n, s, e, w, ne, nw, se, sw)   
   this.grabx = null; //Some useful values   
   this.graby = null;   
   this.width = null;   
   this.height = null;