在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' onclick='all_select_click()'>
</th>
<th width="130" onmouseover="MouseOver(this)" onmousedown="startDrag(this)"
onmousemove="Drag(this)" onmouseup="stopDrag(this)">
房號
</th>
<th width="112" onmouseover="MouseOver(this)" onmousedown="startDrag(this)"
onmousemove="Drag(this)" onmouseup="stopDrag(this)">
資訊
</th>
<th width="165" onmouseover="MouseOver(this)" onmousedown="startDrag(this)"
onmousemove="Drag(this)" onmouseup="stopDrag(this)">
起始日期
</th>
<th width="165" onmouseover="MouseOver(this)" onmousedown="startDrag(this)"
onmousemove="Drag(this)" onmouseup="stopDrag(this)">
起始時間
</th>
</tr>
</HeaderTemplate>
<AlternatingItemTemplate>
<tr class="even">
<td align="center" class="vorRowtd">
<input type='checkbox' Serial='<%# DataBinder.Eval(Container.DataItem,"Serial")%>'
onclick='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")%>'
onclick='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>