js 鼠标画矩形选择区域

今天一直在纠结JS画矩形，找了很多资料，终于找到个像样点的了，自己改了点，不过还存在一些问题

<form name="myForm" action="exportToExcel" method="POST">

 <div style="position:absolute;top:1260px;left:400px;z-index:-1;">
     <input type="button" value="select" onclick="beginSelect()"
      name="select" />
     <input type="button" value="export" onclick="get()" name="export" />
     <input type="hidden" name="textDatas">
    </div>

   </form>

  </div>

  <iframe name=saveWin height=0 width=0></iframe>
  <div id="ld" class="area" style="filter: Alpha(Opacity=60)"></div>
 </body>
 <script language='javascript'>
var value = "";
int index=0;

//矩形选择区域
var client_x = 0;
var client_y = 0;
var bLeftDown = false;
var bSelected =false;
var bClick = false;

//存矩形选择区域
var tempX1=0;
var tempY1=0;
var tempX2=0;
var tempY2=0;
//将像素字符串转成int
function changePixelToInt(pixel){
 var str = pixel;
 return parseInt(str.substring(0,str.indexOf("px")));
}

 

//这里是得到所选矩形区域内的所有文本框值

function get(){
    if(!bSelected)
       {
    window.alert("请选择要导出的区域!");
    return;
    }
    //获得矩形选择区域坐标
     tempX1=changePixelToInt(ld.style.left);
     tempY1=changePixelToInt(ld.style.top);
       tempX2=tempX1+changePixelToInt(ld.style.width);
     tempY2=tempY1+changePixelToInt(ld.style.height);
  
        var texts = document.myForm.elements;
       for(var i = 0; i < texts.length; i ++){
            if(texts[i].type == 'text'){
             getAbsPoint(texts[i]);
            }
        }

       document.myForm.textDatas.value=value;//将文本框信息赋给POST
        init();
        document.myForm.submit();
}
//获得文本框信息
function   getAbsPoint(obj)     
{     
   var   x,y;     
   var oRect   =   obj.getBoundingClientRect();     
 x=oRect.left +document.body.scrollLeft  ;  
 y=oRect.top  +document.body.scrollTop ;  
 

//判断是否在所选区域内
 if(Math.max(x,tempX1)>=Math.min(x+obj.offsetWidth,tempX2) || Math.max(y,tempY1)>=Math.min(y+obj.offsetHeight,tempY2)){
    //两个矩形不相交，则不在所选区域内，退出
    return;
 }
 //文本框信息用#分开
    var s = index+"#"+obj.value+"#"+x+"#"+y+"#"+obj.offsetWidth+"#"+obj.offsetHeight;
 value +=s;
 value+="!";  //将各文本框组合成长串
 index++;
}  
//初始化
function init(){
   bSelected = false;
   document.myForm.select.value="select";
   ld.style.width  = 0;
   ld.style.height = 0;
   ld.style.left   = client_x;
   ld.style.top    = client_y;
   ld.style.visibility = "hidden";
   bClick = false;
   tempX1=0;
   tempY1=0;
   tempX2=0;
   tempY2=0;
   value = "";
}

//是否变成可选择状态

function beginSelect(){
   var value = document.myForm.select.value;
   if(value=="select"){
     bSelected = true;
     document.myForm.select.value="cancel";
 }
 else{
 bSelected = false;
     document.myForm.select.value="select";
 }
}
//随鼠标运动的更改函数
function resize()
{     
      if(bSelected){
       if(bLeftDown){
       if(bClick){
        ld.style.width  = 0;
        ld.style.height = 0;
        ld.style.left   = client_x;
        ld.style.top    = client_y;
        ld.style.visibility = "visible";
        bClick = false;
        }
       
        var scroll_left = document.body.scrollLeft;
        var scroll_top  = document.body.scrollTop;
        var new_x   = event.clientX + scroll_left;
        var new_y   = event.clientY + scroll_top;
 
        //swordmaple javascript article @jx165.com
        //by im286 yeye
        //取得当前鼠标位置
        if (new_y>=client_y) temp_height = new_y  - client_y;
        else {
                temp_height   = client_y  - new_y;
                ld.style.top  = new_y;
        }
        //如果上下移动
        if (new_x>=client_x)  temp_width = new_x  - client_x;
        else {
                temp_width = client_x  - new_x;
                ld.style.left   = new_x;
        }
        //如果左右移动
        ld.style.width  = temp_width;
        ld.style.height = temp_height;
        //重设层的宽度及位置
        return false;
  }}
}
//点击鼠标重设
function reset()
{    
      if(bSelected){
       if(event.button == 1)
     bLeftDown = true;
       if(bLeftDown){
      bClick = true;
    client_x        = event.clientX + document.body.scrollLeft;
        client_y        = event.clientY + document.body.scrollTop;   
   }
  }
        //初始定义层属性
}
//放开鼠标键操作
function mouseup(){
    bLeftDown = false;
}
document.onmousedown  = reset;
document.onmousemove  = resize;
document.onmouseup = mouseup;
</script>
</html>