在asp.net中实现可拖动列的table

 

在asp.net中实现可拖动列的table
===================================================================== 
//可拖动列的表格

var drag = false;
var warea = false;

//onmouseover
function MouseOver(obj)
{
  var validArea = obj.offsetWidth - event.offsetX;
  
  if(validArea < 10)
  {
    warea = true;
    obj.style.cursor = "w-resize";
  }
  else
  {
    MouseOut(obj);
  }
}

//onmouseout
function MouseOut(obj)
{
  warea = false;
  obj.style.cursor = "auto";
}

//onmousedown
function startDrag(obj)
{
  if(warea)
  {
    obj.tdwidth = obj.offsetWidth;  
    obj.xstart = window.event.clientX;
    drag = true;
    obj.setCapture();
  }
}

//onmousemove
function Drag(obj)
{
  if(drag)
  {
    var xnow = window.event.clientX;
    var xstart = obj.xstart;
  
    var xwidth = xnow - xstart;
    var nwidth = obj.tdwidth;
   
    var nowWidth = nwidth + xwidth;
   
    if(nowWidth<3)
      return ;
    else
    {
      obj.style.width = nowWidth;
    }
  }
 
  MouseOver(obj);
}

//onmouseup
function stopDrag(obj)
{
  if(drag)
  {
    drag = false;
    obj.style.cursor = "auto";
    obj.releaseCapture();
  }
}

//ondbclick
function fit(obj)
{
  obj.style.width = 0;
}
====.aspx中用repeater调用====================================================
<asp:Repeater ID="myRepeater" Runat="server">
  <HeaderTemplate>
    <table id="tbl" border="0">
      <tr class="tr-lock">
 <th class="vorGrid-hc" width="30">
   <input type='checkbox' id='chkAll' οnclick='all_select_click()'>
 </th>
 <th width="130" οnmοuseοver="MouseOver(this)" οnmοusedοwn="startDrag(this)"
            οnmοusemοve="Drag(this)" οnmοuseup="stopDrag(this)">
   房号
        </th>
 <th width="112" οnmοuseοver="MouseOver(this)" οnmοusedοwn="startDrag(this)"
     οnmοusemοve="Drag(this)" οnmοuseup="stopDrag(this)">
    信息
 </th>
 <th width="165" οnmοuseοver="MouseOver(this)" οnmοusedοwn="startDrag(this)"
     οnmοusemοve="Drag(this)" οnmοuseup="stopDrag(this)">
   起始日期
 </th>
 <th width="165" οnmοuseοver="MouseOver(this)" οnmοusedοwn="startDrag(this)"
     οnmοusemοve="Drag(this)" οnmοuseup="stopDrag(this)">
   起始时间
        </th>
      </tr>
  </HeaderTemplate>
  <AlternatingItemTemplate>
    <tr class="even">
      <td align="center" class="vorRowtd">
 <input type='checkbox' Serial='<%# DataBinder.Eval(Container.DataItem,"Serial")%>'
   οnclick='single_select_click()'>
      </td>
      <td><%# DataBinder.Eval(Container.DataItem,"Room")%></td>
      <td><%# DataBinder.Eval(Container.DataItem,"Descp")%></td>
      <td><%# DataBinder.Eval(Container.DataItem,"BeginDate")%></td>
      <td><%# DataBinder.Eval(Container.DataItem,"BeginTime")%></td>
    </tr>
  </AlternatingItemTemplate>
  <ItemTemplate>
    <tr class="odd">
 <td align="center" class="vorRowtd">
 <input type='checkbox' Serial='<%# DataBinder.Eval(Container.DataItem,"Serial")%>'
  οnclick='single_select_click()'>
      </td>
      <td><%# DataBinder.Eval(Container.DataItem,"Room")%></td>
      <td><%# DataBinder.Eval(Container.DataItem,"Descp")%></td>
      <td><%# DataBinder.Eval(Container.DataItem,"BeginDate")%></td>
      <td><%# DataBinder.Eval(Container.DataItem,"BeginTime")%></td>
    </tr>
  </ItemTemplate>
  <FooterTemplate>
    </table>
  </FooterTemplate>
</asp:Repeater>