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

redebug 2007-06-09 06:30:15
在web开发javascript板块发布了这个问题，但没有人回答，希望这里有朋友帮忙。


一个固定大小的table，2行2列，
假定各个单元格分布如下

A B

C D

现在想通过鼠标拖动 D 单元格 ，来动态改变A个的高度和宽度并且整个Table的高度和宽度不变，现在的代码可以实现Table的宽度固定了，但table的高度固定不了，请大家帮忙，忙了一下午了，还是解决不了。

代码如下


<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值（对象在页面中的位置）
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");
tableParent = document.getElementById("TargetTable");



var newWidth =relWidth + event.clientX-mouseDownX ;
if(newWidth<1) newWidht=1;//防左移出 offsetWidth 253 Long

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 - 10 ) //防下移出
{
newHeight=parentHeight - 10;

}

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">
 </td>
<td >
 </td>
</tr>
<tr>
<td id="TDSecond">
 </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>
...全文
1158 7 打赏 收藏 转发到动态 举报
写回复
用AI写文章
7 条回复
切换为时间正序
请发表友善的回复…
发表回复
Ischema 2007-06-10
  • 打赏
  • 举报
 回复
城市刀客???
redebug 2007-06-10
  • 打赏
  • 举报
 回复
感谢城市刀客！！
chouchy 2007-06-10
  • 打赏
  • 举报
 回复
<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">
 </td>
<td >
 </td>
</tr>
<tr>
<td id="TDSecond">
 </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>
redebug 2007-06-09
  • 打赏
  • 举报
 回复
顶起 等待答案
小刚ZLG 2007-06-09
  • 打赏
  • 举报
 回复
if(newHeight > 379 - 10 ) //防下移出
{
newHeight=379 - 10;

}
Jinglecat 2007-06-09
  • 打赏
  • 举报
 回复
我不会，我要顶 :D
redebug 2007-06-09
  • 打赏
  • 举报
 回复
http://community.csdn.net/Expert/topic/5591/5591055.xml?temp=.5695764

能帮忙解决的朋友 一并在这个帖子里回个话
100分送上
vue-easytable@2.16.3版本 拖动列 动态改变列宽大小实现
vue-easytable表格老版本有表格列宽拖功能，但是最新版插件反而不存在该功能，但是大部分表格数据存在...若将ve-table封装以组件形式引用，可全局实现拖动表格列 改变列宽大小效果。如何封装我也会在资源内详细说明。
table拖动(固定宽度，兼容Firefox 3.5IE6)
在web中模拟窗口表格控件，可以用鼠标拖动改变表格列宽,兼容Firefox 3.5和IE6浏览器。和之前的一个不同的是这个是固定了table的宽度。 相应函数修改为一下后可适应tabel的border属性取不同值： o.p_p_c_gw=...
Javascript基础到入门
Javascript基础到入门视频，该课程主要围绕JavaScript能做什么？JavaScript应用场合、JavaScript的学习方法三大话题展开教学。 讲师介绍：张中强，诺客科技技术总监/研发总监。 丰富的项目经验，善于用精炼的代码来...
鼠标拖动调整table列宽实例
web页面中通过鼠标拖动来调整table列宽的实例，用JS实现，使用起来超级简单，只需要把JS文件导入，然后在需要实现该效果的table中套用CSS就可以了，还不会的去看实例，实例中有DEMO的页面。
resizingCell:通过拖动tinyMCE实时调整表格单元格
调整单元格大小通过拖动tinyMCE实时调整表格单元格等待 tinyMCE 管理员的批准。 jsFiddle 预览在这里
.NET社区

62,046

社区成员

669,049

社区内容

发帖
与我相关
我的任务
社区描述
.NET技术交流专区
javascript云原生 企业社区
社区管理员
  • ASP.NET
  • .Net开发者社区
  • R小R
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告

.NET 社区是一个围绕开源 .NET 的开放、热情、创新、包容的技术社区。社区致力于为广大 .NET 爱好者提供一个良好的知识共享、协同互助的 .NET 技术交流环境。我们尊重不同意见，支持健康理性的辩论和互动，反对歧视和攻击。

希望和大家一起共同营造一个活跃、友好的社区氛围。

试试用AI创作助手写篇文章吧

+ 用AI写文章