<div id='shadow' style='visibility:hidden; position:absolute; top:30; left:30; width:30; height:30; z-index:1; background-color:#BED9EB; filter:alpha(opacity=40);'>我是阴影，半透明的</div>
<table cellpadding='4' cellspacing='0' style='position:absolute; top:160; left:160; width:160; height:160; z-index:1020; TABLE-LAYOUT:fixed; WORD-BREAK:break-all; border:1 solid #BED9EB; background-color:#ffffff; FONT-SIZE:12; FONT-FAMILY:宋体;' onmousedown=Focus(this)>
<tr style='display:none'><td></td><td style='width:45;'></td><td style='width:10;'></td></tr> <!-- 固定单元格宽度 -->
<tr style='cursor:default; background-color:#BED9EB;' onmousedown=Down(this) onmousemove=Remove(this) onmouseup=Up(this)>
<td style='filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#FFFFFF, endColorStr=#BED9EB, gradientType=0);'>
<div nowrap><strong>title</strong></div>
</td>
<td colspan='2' align='right' style='FILTER:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#FFFFFF, endColorStr=#BED9EB, gradientType=0);'>
<div nowrap><a href='http://www.163.com'>[删]</a><a href='http://www.sohu.com'>[改]</a></div>
</td>
</tr>
<tr>
<td colspan='3' valign='top' style='height:100%; padding-top:10; padding-left:10; padding-right:10; padding-bottom:0'>
感谢CSDN的朋友们，谢谢你们的热心帮助！
<p>
熬了两个通宵，还没做完呢，请大家批评！呵呵！
</td>
</tr>
<tr>
<td colspan='2'></td><td style='cursor:se-resize; height:10; background-color:#BED9EB; FILTER:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#BED9EB, endColorStr=#FFFFFF, gradientType=1);' onmousedown=Down(this) onmousemove=Resize(this) onmouseup=Up(this)></td> <!-- state & resize -->
</tr>
</table>
<table cellpadding='4' cellspacing='0' style='position:absolute; top:100; left:300; width:200; height:100; z-index:1010; TABLE-LAYOUT:fixed; WORD-BREAK:break-all; border:1 solid #BED9EB; background-color:#ffffff; FONT-SIZE:12; FONT-FAMILY:宋体;' onmousedown=Focus(this)>
<tr style='display:none'><td></td><td style='width:45;'></td><td style='width:10;'></td></tr> <!-- 固定单元格宽度 -->
<tr style='cursor:default; background-color:#BED9EB;' onmousedown=Down(this) onmousemove=Remove(this) onmouseup=Up(this)>
<td style='FILTER:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#FFFFFF, endColorStr=#BED9EB, gradientType=0);'>
<div nowrap><strong>可移动、改变大小的窗口（我看了许多精华贴，还是不会）</strong></div>
</td>
<td colspan='2' align='right' style='FILTER:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#FFFFFF, endColorStr=#BED9EB, gradientType=0);'>
<div nowrap><a href='http://www.163.com'>[删]</a><a href='http://www.sohu.com'>[改]</a></div>
</td>
</tr>
<tr>
<td colspan='3' valign='top' style='height:100%; padding-top:10; padding-left:10; padding-right:10; padding-bottom:0'>
我想将remove,content,resize这三个部分整合成窗口
<p>
试过用div嵌套，但不会调用父元素。我用MouseDown(this.parentElement)不可以，obj.srcElement.parentElement也不行，搞不懂
<p>
做成table或分开显示也都做不出来，请高手帮忙，谢谢！
<p>
<a href='http://jkisjk.vip.sina.com/html/MoveTableWithMouse.htm'>http://jkisjk.vip.sina.com/html/MoveTableWithMouse.htm</a><br>
这个代码看了，但我不想给元素命名，因为将来要画出许多个窗口，动态创建元素，还要做z-index，最后保存到数据库，感觉名字固定了很麻烦。
<p>
如果有国外的链接请帖一下，谢谢！
</td>
</tr>
<tr>
<td colspan='2'></td><td style='cursor:se-resize; height:10; background-color:#BED9EB; FILTER:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#BED9EB, endColorStr=#FFFFFF, gradientType=1);' onmousedown=Down(this) onmousemove=Resize(this) onmouseup=Up(this)></td> <!-- state & resize -->
</tr>
</table>
<script>
/**
* 作者: aiiiq
* 邮件: aiiiq@yahoo.com.cn
* 网址: http://www.aiiiq.com
* 日期: 2005-9-6 09:20:00
* 环境: IE6.0.2800.2106 & WIN98 & 网吧 & 北京
* 致谢: 特别感谢CSDN的朋友们，谢谢你们的热心帮助！
*/
/**
* 初始化
*/
move = null; //移动标记
wmin = 100; //最小的窗口为100x100
zmax = 10000; //刻录当前的最高层
ssize = 4; //阴影宽度
/**
* 父窗口内按下鼠标时，得到相关的值
*/
function Down(obj){
move = 1;
obj.x = event.x; //鼠标起始位置
obj.y = event.y;
obj.l = obj.offsetParent.offsetLeft; //父元素当前位置
obj.t = obj.offsetParent.offsetTop;
obj.w = obj.offsetParent.offsetWidth;
obj.h = obj.offsetParent.offsetHeight;
Shadow(obj) //重画阴影
obj.setCapture(); //得到鼠标
}
/**
* 标题栏托动窗口
*/
function Remove(obj){
if(move != null){
obj.offsetParent.style.left = event.x - obj.x + obj.l; // 鼠标移过的位置 + 父元素当前位置
obj.offsetParent.style.top = event.y - obj.y + obj.t;
Shadow(obj) //重画阴影
}
}
/**
* 状态栏改变窗口大小
*/
function Resize(obj){
if(move != null){
obj.offsetParent.style.width = Math.max(wmin, event.x - obj.x + obj.w); //窗口的width, height不能为负数
obj.offsetParent.style.height = Math.max(wmin, event.y - obj.y + obj.h);
Shadow(obj) //重画阴影
}
}
/**
* 放开鼠标时，清理不用的东西
*/
function Up(obj){
move = null;
document.getElementById('shadow').style.visibility = 'hidden'; //隐藏阴影
obj.releaseCapture(); //释放鼠标
}
/**
* 父窗口按下鼠标时，将当前层置顶
*/
function Focus(obj){
zmax = zmax +10; //最高层（变量）每次点击加10，以保证最高
obj.style.zIndex = zmax; //将当前层置顶，当前层 = 最高层
document.getElementById('shadow').style.zIndex = zmax - 1; //阴影的层 = 最高层 - 1
}
/**
* 标题栏按下鼠标或移动窗口时，重画阴影
*/
function Shadow(obj){
/**
* 阴影的位置 = 新的父元素位置 + 阴影宽度
*/
document.getElementById('shadow').style.left = obj.offsetParent.offsetLeft + ssize;
document.getElementById('shadow').style.top = obj.offsetParent.offsetTop + ssize;
document.getElementById('shadow').style.width = obj.offsetParent.offsetWidth;
document.getElementById('shadow').style.height = obj.offsetParent.offsetHeight;
document.getElementById('shadow').style.visibility = 'visible';
}
</script>
