|
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2008-12-16
最后修改：2008-12-18
Table表格拖动， 既可以拖动行，也可以拖动列。代码如下：
<html>
<head>
<style>
.resizeDivClass
{
position:relative;
width:4;
z-index:1;
left:expression(this.parentElement.offsetWidth - 3);
cursor:e-resize;
}
.resizeDivClass2
{
position:relative;
width:expression(this.parentElement.offsetWidth);
height:1px;
border: solid 0px;
z-index:1;
top:expression(this.parentElement.offsetHeight - 5);
cursor:n-resize;
}
</style>
<script language=javascript>
function MouseDownToResize(obj)
{
obj.mouseDownX=event.clientX;
obj.pareneTdW=obj.parentElement.offsetWidth;
obj.pareneTableW=theObjTable.offsetWidth;
obj.setCapture();
}
function MouseMoveToResize(obj)
{
if(!obj.mouseDownX)
{
return false;
}
var newWidth=obj.pareneTdW*1+event.clientX*1-obj.mouseDownX;
if(newWidth>0)
{
obj.parentElement.style.width = newWidth;
theObjTable.style.width=obj.pareneTableW*1+event.clientX*1-obj.mouseDownX;
}
}
function MouseUpToResize(obj)
{
obj.releaseCapture();
obj.mouseDownX=0;
}
function MouseDownToResize2(obj)
{
obj.mouseDownY = event.clientY;
obj.pareneTrH = obj.parentElement.offsetHeight;
obj.pareneTableH=theObjTable.offsetHeight;
obj.setCapture();
}
function MouseMoveToResize2(obj)
{
if(!obj.mouseDownY)
{
return false;
}
var newWidth = obj.pareneTrH * 1 + event.clientY * 1 - obj.mouseDownY;
if(newWidth > 0)
{
obj.parentElement.style.height = newWidth;
theObjTable.style.height = obj.pareneTableH * 1 + event.clientY * 1 - obj.mouseDownY;
}
}
function MouseUpToResize2(obj)
{
obj.releaseCapture();
obj.mouseDownY=0;
}
</script>
</head>
<body>
改变table的列宽度
<table id=theObjTable STYLE="table-layout:fixed" border="1" >
<tr bgcolor=cccccc >
<td valign=top >
<div class="resizeDivClass" onMouseDown="MouseDownToResize(this);" onMouseMove="MouseMoveToResize(this);" onMouseUp="MouseUpToResize(this);"></div>
aaa
</td>
<td valign=top >
<div class="resizeDivClass" onMouseDown="MouseDownToResize(this);" onMouseMove="MouseMoveToResize(this);" onMouseUp="MouseUpToResize(this);"></div>ddd
</td>
<td valign=top >
<div class="resizeDivClass" onMouseDown="MouseDownToResize(this);" onMouseMove="MouseMoveToResize(this);" onMouseUp="MouseUpToResize(this);"></div>ddd
</td>
</tr>
<tr>
<td valign=top >
<div class="resizeDivClass2" onMouseDown="MouseDownToResize2(this);" onMouseMove="MouseMoveToResize2(this);" onMouseUp="MouseUpToResize2(this);"></div>
快乐不是因为拥有的多，而是计较的少。
</td>
<td valign=top >
<div class="resizeDivClass2" onMouseDown="MouseDownToResize2(this);" onMouseMove="MouseMoveToResize2(this);" onMouseUp="MouseUpToResize2(this);"></div>
bbbb
</td>
<td valign=top >
<div class="resizeDivClass2" onMouseDown="MouseDownToResize2(this);" onMouseMove="MouseMoveToResize2(this);" onMouseUp="MouseUpToResize2(this);"></div>
dddd
</td>
</tr>
<tr>
<td valign=top >
<div class="resizeDivClass2" onMouseDown="MouseDownToResize2(this);" onMouseMove="MouseMoveToResize2(this);" onMouseUp="MouseUpToResize2(this);"></div>快乐不是因为拥有的多，而是计较的少。
</td>
<td valign=top >
<div class="resizeDivClass2" onMouseDown="MouseDownToResize2(this);" onMouseMove="MouseMoveToResize2(this);" onMouseUp="MouseUpToResize2(this);"></div>
bbbb
</td>
<td valign=top >
<div class="resizeDivClass2" onMouseDown="MouseDownToResize2(this);" onMouseMove="MouseMoveToResize2(this);" onMouseUp="MouseUpToResize2(this);"></div>
dddd
</td>
</tr>
<tr>
<td valign=top >
<div class="resizeDivClass2" onMouseDown="MouseDownToResize2(this);" onMouseMove="MouseMoveToResize2(this);" onMouseUp="MouseUpToResize2(this);"></div>快乐不是因为拥有的多，而是计较的少。
</td>
<td valign=top >
<div class="resizeDivClass2" onMouseDown="MouseDownToResize2(this);" onMouseMove="MouseMoveToResize2(this);" onMouseUp="MouseUpToResize2(this);"></div>
bbbb
</td>
<td valign=top >
<div class="resizeDivClass2" onMouseDown="MouseDownToResize2(this);" onMouseMove="MouseMoveToResize2(this);" onMouseUp="MouseUpToResize2(this);"></div>
dddd
</td>
</tr>
<tr>
<td valign=top >
<div class="resizeDivClass2" onMouseDown="MouseDownToResize2(this);" onMouseMove="MouseMoveToResize2(this);" onMouseUp="MouseUpToResize2(this);"></div>快乐不是因为拥有的多，而是计较的少。
</td>
<td valign=top >
<div class="resizeDivClass2" onMouseDown="MouseDownToResize2(this);" onMouseMove="MouseMoveToResize2(this);" onMouseUp="MouseUpToResize2(this);"></div>
bbbb
</td>
<td valign=top >
<div class="resizeDivClass2" onMouseDown="MouseDownToResize2(this);" onMouseMove="MouseMoveToResize2(this);" onMouseUp="MouseUpToResize2(this);"></div>
dddd
</td>
</tr>
</table>
</body>
</html>
复制下来试验一下吧。 声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2008-12-17
在代码的第60行
objobj.pareneTrH = obj.parentElement.offsetHeight; 应该是 obj.pareneTrH = obj.parentElement.offsetHeight; 还是很不错的东西 |
| 返回顶楼 | |
|
发表时间：2008-12-17
最后修改：2008-12-17
楼主 提供个 附件会不会更好一些??
|
| 返回顶楼 | |
|
发表时间：2008-12-17
33行多 obj
|
| 返回顶楼 | |
|
发表时间：2008-12-17
楼主的代码测过吗？
|
| 返回顶楼 | |
|
发表时间：2008-12-18
zhangshuling1214 写道 在代码的第60行 objobj.pareneTrH = obj.parentElement.offsetHeight; 应该是 obj.pareneTrH = obj.parentElement.offsetHeight; 还是很不错的东西 我不知道为什么，我已经注意到这个问题，但是当我打开文档的编辑状态时，第60行确确实实只有一个obj，但我已提交保存，就变成两个obj了。很灵异的想象... |
| 返回顶楼 | |
|
发表时间：2008-12-18
fins 写道 楼主 提供个 附件会不会更好一些?? 我测试过，我在单位做打印模块时，用的就是这段代码，对于附件，其实这只有一片文档，你把它复制到一个记事本里，然后把后缀改成.html，保存就可以看到结果了。 |
| 返回顶楼 | |
|
发表时间：2009-02-04
最后修改：2009-02-04
xuyao 写道 楼主的代码测过吗？
在IE8上经过测试，既不可以拖动行，也不可以拖动列。 |
| 返回顶楼 | |
|
发表时间：2009-02-08
最后修改：2009-02-08
下次传个附件多好啊。也能避免代码错误的问题。
ie7下也能实现拖拽 |
| 返回顶楼 | |
|
发表时间：2009-02-08
请问为何在ff3下无效果？
|
| 返回顶楼 | |
