如何在table高度宽度固定的情况下，拖动表格的大小？？

var tableParent = document.getElementById("TargetTable");
var parentWidth = tableParent.offsetWidth;
var parentHeight = tableParent.offsetHeight; 
这两句没取到值，这样改下就可以了：
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
</head>
<body>
<table style="width: 452px; height: 379px; " border=1 id="TargetTable" ><tr>
<td style="width: 7px; height: 2px" id="TDFirst">
&nbsp;</td>
<td >
&nbsp;</td>
</tr>
<tr>
<td id="TDSecond">
&nbsp;</td>
<td height="100%" style="overflow:hidden;" align="left" valign="top" onmousedown="OnMouseDown1(this)" onmousemove="OnMouseMove1(this)" onmouseup="OnMouseUp1(this)" >
12</td>
</tr></table></body><script type="text/javascript">
var currentClickObj = null;
var currentMoveObj = document.getElementById("TDFirst"); //当前拖动对象
var relWidth; //鼠标按下位置相对对象位置
var relHeight;
var elX;
var elY;
var mouseDownY;
var mouseDownX;var zindex=-1;//控制被拖动对象的z-index值（对象在页面中的位置）
var tableParent = document.getElementById("TargetTable");
var parentWidth = tableParent.offsetWidth;
var parentHeight = tableParent.offsetHeight;
//鼠标按下
function OnMouseDown1(obj)
{
currentClickObj = obj; //当对象被按下时，记录该对象currentMoveObj = document.getElementById("TDFirst");
tableParent = document.getElementById("TargetTable");
relWidth = currentMoveObj.offsetWidth;
relHeight = currentMoveObj.offsetHeight;
zindex=currentClickObj.style.zIndex; //记录原z-index值
currentClickObj.style.zIndex=2;
currentClickObj.setCapture(); //事件捕获
mouseDownY = event.clientY;
mouseDownX = event.clientX;
// parentWidth = tableParent.offsetWidth;
// parentHeight = tableParent.offsetHeight;}
//
//鼠标移动
//
function OnMouseMove1(obj)
{
if(currentClickObj != null)
{var TDSecond2 = document.getElementById("TDSecond");
currentMoveObj = document.getElementById("TDFirst");
var newWidth =relWidth + event.clientX-mouseDownX ;
if(newWidth<1) newWidht=1;//防左移出 offsetWidth253Longif(newWidth >parentWidth - 1) //防右移出
{
newLeft=parentWidth - 1;}
currentMoveObj.style.pixelWidth = newWidth;
// currentClickObj.style.pixelWidth = parentWidth - newWidth;
// TDSecond2.style.pixelHeight = parentHeight - newHeight;var newHeight =relHeight + event.clientY-mouseDownY;if(newHeight<1) newHeight = 1;//防上移出
if(newHeight > parentHeight - 25 ) //防下移出
{
newHeight=parentHeight - 25;}currentMoveObj.style.pixelHeight = newHeight;
// currentClickObj.style.pixelHeight = parentHeight - newHeight;
// TDSecond2.style.pixelHeight = parentHeight - newHeight;}
}
//
//释放鼠标
//
function OnMouseUp1()
{
if(currentClickObj != null)
{
currentClickObj.style.zIndex=zindex; //恢复zIndex
zindex=-1;
currentClickObj.releaseCapture(); //当鼠标释放时同时释放事件捕获
currentClickObj = null; //当鼠标释放时同时释放拖动对象
}
}
</script>
</html>

解决方案 »

  1.   

    Ischema(花客)  十分感谢
    麻烦你在 http://community.csdn.net/Expert/topic/5591/5591136.xml?temp=.611828  这个帖子里回个话 
    分一并给你
      

  2.   

    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
        <title>Untitled Page</title>
    </head> <script   type="text/javascript">   
      var   currentClickObj = null;
      var   currentMoveObj   = document.getElementById("TDFirst");                 //当前拖动对象   
      var   relWidth;                 //鼠标按下位置相对对象位置   
      var   relHeight;   
      var   elX;   
      var   elY;   
      var   mouseDownY;   
      var   mouseDownX;   
      var   zindex=-1;//控制被拖动对象的z-index值（对象在页面中的位置）   /*----------------------这会出错的，应该在onload中初始化-------------------
     // var   tableParent = document.getElementById("TargetTable");
     // var   parentWidth =  tableParent.offsetWidth;
     // var   parentHeight = tableParent.offsetHeight;  
     */ var tableParent=null;
     var parentWidth=0;
     var parentHeight=0;window.onload=function()
     {
     tableParent = document.getElementById("TargetTable");
     parentWidth =  tableParent.offsetWidth;
     parentHeight = tableParent.offsetHeight;  
     }
        
        
      //鼠标按下   
      function   OnMouseDown1(obj)   
      {   
          currentClickObj   =   obj;                 //当对象被按下时，记录该对象   
          
          currentMoveObj   = document.getElementById("TDFirst");
          tableParent = document.getElementById("TargetTable");
          
          
          relWidth   =   currentMoveObj.offsetWidth;   
          relHeight   =   currentMoveObj.offsetHeight;   
          zindex=currentClickObj.style.zIndex;                                     //记录原z-index值   
          currentClickObj.style.zIndex=2;   
          currentClickObj.setCapture();                                                   //事件捕获   
          mouseDownY   =   event.clientY;   
          mouseDownX   =   event.clientX;   
    //      parentWidth = tableParent.offsetWidth;
    //      parentHeight = tableParent.offsetHeight;
          
      }   
      //   
      //鼠标移动   
      //   
      function   OnMouseMove1(obj)   
      {   
          if(currentClickObj   !=   null)   
          {
          
              var TDSecond2 = document.getElementById("TDSecond");   
              currentMoveObj   = document.getElementById("TDFirst");
              tableParent = document.getElementById("TargetTable");
            
              
              
              var   newWidth =relWidth + event.clientX-mouseDownX   ;   
              if(newWidth<1)   newWidht=1;//防左移出   offsetWidth253Long          if(newWidth >parentWidth - 1)   //防右移出   
              {
                  newLeft=parentWidth - 1;   
                  
              }
             currentMoveObj.style.pixelWidth = newWidth;
           // currentClickObj.style.pixelWidth = parentWidth - newWidth;
          //  TDSecond2.style.pixelHeight = parentHeight - newHeight;           
                  
              var   newHeight =relHeight + event.clientY-mouseDownY;   
              
              if(newHeight<1)   newHeight = 1;//防上移出   
              if(newHeight > parentHeight - tableParent.offsetTop-15 )   //防下移出   <--------------------修改这里
              {
                  newHeight=parentHeight - tableParent.offsetTop-15;     //<--------------------修改这里
                  
              }
              
            currentMoveObj.style.pixelHeight = newHeight;
         //   currentClickObj.style.pixelHeight = parentHeight - newHeight;
        //    TDSecond2.style.pixelHeight = parentHeight - newHeight;
              
              
                
          }   
      }   
      //   
      //释放鼠标   
      //   
      function   OnMouseUp1()   
      {   
           if(currentClickObj   !=   null)   
          {  
                  currentClickObj.style.zIndex=zindex;     //恢复zIndex   
                  zindex=-1;   
                  currentClickObj.releaseCapture();           //当鼠标释放时同时释放事件捕获   
                  currentClickObj   =   null;                               //当鼠标释放时同时释放拖动对象   
          }
      }   
      </script>   <body>
        <table style="width: 452px; height: 379px; "  border=1  id="TargetTable" >
           
            <tr>
                <td style="width: 7px; height: 2px" id="TDFirst">
                    &nbsp;</td>
                <td  >
                    &nbsp;</td>
            </tr>
            <tr>
                <td id="TDSecond">
                    &nbsp;</td>
                <td height="100%" style="overflow:hidden;" align="left" valign="top" onmousedown="OnMouseDown1(this)"   onmousemove="OnMouseMove1(this)"   onmouseup="OnMouseUp1(this)" >
                    12</td>
            </tr>
           
        </table></body>
    </html>