<html><style>
DIV {cursor: hand}
</style><body style="font-family: verdana">
<H2>Simple Drag and Resize Example</h2>
<h4>Use alt-click to multi-select</h4><input type=button value="Moving, click to resize"
onclick="toggleMoveResize(this); return false"><div moveable=true style="position: absolute;
top: 150px; left: 100px;
width: 100px; height: 100px;
background-color: red;
border: solid 2px black">
Click and drag me
</div><div moveable=true style="position: absolute;
top: 150px; left: 250px;
width: 100px; height: 100px;
background-color: blue;
border: solid 2px black">
Click and drag me
</div><script language="JavaScript">
var activeElements = new Array();
var activeElementCount = 0;var lTop, lLeft;
var doMove = true;
var doResize = false;function toggleMoveResize(e) {
if (doMove) {
doMove = false;
doResize = true;
e.value = "Resizing, Click to Move";
} else {
doMove = true;
doResize = false;
e.value = "Moving, Click to Resize";
}
}function mousedown() {
var mp; mp = findMoveable(window.event.srcElement); if (!window.event.altKey) {
for (i=0; i<activeElementCount; i++) {
if (activeElements[i] != mp) {
activeElements[i].style.borderWidth = "2px";
}
}
if (mp) {
activeElements[0] = mp;
activeElementCount = 1;
mp.style.borderWidth = "4px";
} else {
activeElementCount = 0;
}
} else {
if (mp) {
if (mp.style.borderWidth != "4px") {
activeElements[activeElementCount] = mp;
activeElementCount++;
mp.style.borderWidth = "4px";
}
}
} window.status = activeElementCount; lLeft = window.event.x;
lTop = window.event.y;
}document.onmousedown = mousedown;function mousemove() {
var i, dLeft, dTop; if (window.event.button == 1) { sx = window.event.x;
sy = window.event.y; dLeft = sx - lLeft;
dTop = sy - lTop; for (i=0; i<activeElementCount; i++) {
if (doMove)
moveElement(activeElements[i], dLeft, dTop);
if (doResize)
resizeElement(activeElements[i], dLeft, dTop);
} lLeft = sx;
lTop = sy; return false;
}}function moveElement(mp, dLeft, dTop) {
var e
e = mp;
e.style.posTop += dTop;
e.style.posLeft += dLeft;
}function resizeElement(mp, dLeft, dTop) {
var e;
e = mp;
e.style.posHeight += dTop;
e.style.posWidth += dLeft;
}function findMoveable(e) {
if (e.moveable == 'true')
return e; if (e.tagName == "BODY")
return null; return findMoveable(e.parentElement);
}function findDefinedMoveable(e) {
if ((e.moveable == 'true') || (e.moveable == 'false'))
return e; if (e.tagName == "BODY")
return null; return findDefinedMoveable(e.parentElement);
}function rfalse() {
return false;
}document.onmousemove = mousemove;
document.onselectstart = rfalse;</script></body></html>
DIV {cursor: hand}
</style><body style="font-family: verdana">
<H2>Simple Drag and Resize Example</h2>
<h4>Use alt-click to multi-select</h4><input type=button value="Moving, click to resize"
onclick="toggleMoveResize(this); return false"><div moveable=true style="position: absolute;
top: 150px; left: 100px;
width: 100px; height: 100px;
background-color: red;
border: solid 2px black">
Click and drag me
</div><div moveable=true style="position: absolute;
top: 150px; left: 250px;
width: 100px; height: 100px;
background-color: blue;
border: solid 2px black">
Click and drag me
</div><script language="JavaScript">
var activeElements = new Array();
var activeElementCount = 0;var lTop, lLeft;
var doMove = true;
var doResize = false;function toggleMoveResize(e) {
if (doMove) {
doMove = false;
doResize = true;
e.value = "Resizing, Click to Move";
} else {
doMove = true;
doResize = false;
e.value = "Moving, Click to Resize";
}
}function mousedown() {
var mp; mp = findMoveable(window.event.srcElement); if (!window.event.altKey) {
for (i=0; i<activeElementCount; i++) {
if (activeElements[i] != mp) {
activeElements[i].style.borderWidth = "2px";
}
}
if (mp) {
activeElements[0] = mp;
activeElementCount = 1;
mp.style.borderWidth = "4px";
} else {
activeElementCount = 0;
}
} else {
if (mp) {
if (mp.style.borderWidth != "4px") {
activeElements[activeElementCount] = mp;
activeElementCount++;
mp.style.borderWidth = "4px";
}
}
} window.status = activeElementCount; lLeft = window.event.x;
lTop = window.event.y;
}document.onmousedown = mousedown;function mousemove() {
var i, dLeft, dTop; if (window.event.button == 1) { sx = window.event.x;
sy = window.event.y; dLeft = sx - lLeft;
dTop = sy - lTop; for (i=0; i<activeElementCount; i++) {
if (doMove)
moveElement(activeElements[i], dLeft, dTop);
if (doResize)
resizeElement(activeElements[i], dLeft, dTop);
} lLeft = sx;
lTop = sy; return false;
}}function moveElement(mp, dLeft, dTop) {
var e
e = mp;
e.style.posTop += dTop;
e.style.posLeft += dLeft;
}function resizeElement(mp, dLeft, dTop) {
var e;
e = mp;
e.style.posHeight += dTop;
e.style.posWidth += dLeft;
}function findMoveable(e) {
if (e.moveable == 'true')
return e; if (e.tagName == "BODY")
return null; return findMoveable(e.parentElement);
}function findDefinedMoveable(e) {
if ((e.moveable == 'true') || (e.moveable == 'false'))
return e; if (e.tagName == "BODY")
return null; return findDefinedMoveable(e.parentElement);
}function rfalse() {
return false;
}document.onmousemove = mousemove;
document.onselectstart = rfalse;</script></body></html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>JK:支持民族工业,尽量少买X货</title>
</head><body>
用鼠标移动层<br>
部分代码来自网友 xinyunyishui(心云意水) 对网友 chenxiang123 所开贴的回复：<br>
http://community.csdn.net/Expert/topic/3469/3469939.xml?temp=.6519739<br><table style="position:absolute;top:0;left:0;width:200;height:200;background-color:cccccc;z-index:10" >
<tr >
<td style="width:1" bgcolor=#cccccc rowspan=3 ></td>
<td bgcolor=#cccccc colspan=2 style="cursor:move;" align=center onmousedown=MouseDownToRemove(this) onmousemove=MouseMoveToRemove(this) onmouseup=MouseUpToRemove(this) >
header
</td>
</tr>
<tr rowspan=2>
<td style="padding-bottom:3;padding-right:3;background-color:blue;height:100%" valign=top>
content<br>
content<br>
content<br>
content<br>
content<br> </td>
<td bgcolor=#cccccc style="cursor:e-resize;width:1" onmousedown=MouseDownToResize(this) onmousemove=MouseMoveToResize(this,true,false) onmouseup=MouseUpToResize(this) ></td>
</tr>
<tr style="font-size:1">
<td bgcolor=#cccccc style="cursor:n-resize;" onmousedown=MouseDownToResize(this) onmousemove=MouseMoveToResize(this,false,true) onmouseup=MouseUpToResize(this) ></td>
<td bgcolor=#cccccc style="cursor:se-resize;" onmousedown=MouseDownToResize(this) onmousemove=MouseMoveToResize(this,true,true) onmouseup=MouseUpToResize(this) ></td>
</tr>
</table><table style="position:absolute;top:0;left:0;width:200;height:200;background-color:cccccc;z-index:10" >
<tr >
<td style="width:1" bgcolor=#cccccc rowspan=3 ></td>
<td bgcolor=#cccccc colspan=2 style="cursor:move;" align=center onmousedown=MouseDownToRemove(this) onmousemove=MouseMoveToRemove(this) onmouseup=MouseUpToRemove(this) >
header
</td>
</tr>
<tr rowspan=2>
<td style="padding-bottom:3;padding-right:3;background-color:blue;height:100%" valign=top>
content<br>
content<br>
content<br>
content<br>
content<br> </td>
<td bgcolor=#cccccc style="cursor:e-resize;width:1" onmousedown=MouseDownToResize(this) onmousemove=MouseMoveToResize(this,true,false) onmouseup=MouseUpToResize(this) ></td>
</tr>
<tr style="font-size:1">
<td bgcolor=#cccccc style="cursor:n-resize;" onmousedown=MouseDownToResize(this) onmousemove=MouseMoveToResize(this,false,true) onmouseup=MouseUpToResize(this) ></td>
<td bgcolor=#cccccc style="cursor:se-resize;" onmousedown=MouseDownToResize(this) onmousemove=MouseMoveToResize(this,true,true) onmouseup=MouseUpToResize(this) ></td>
</tr>
</table><table style="position:absolute;top:0;left:0;width:200;height:200;background-color:cccccc;z-index:10" >
<tr >
<td style="width:1" bgcolor=#cccccc rowspan=3 ></td>
<td bgcolor=#cccccc colspan=2 style="cursor:move;" align=center onmousedown=MouseDownToRemove(this) onmousemove=MouseMoveToRemove(this) onmouseup=MouseUpToRemove(this) >
header
</td>
</tr>
<tr rowspan=2>
<td style="padding-bottom:3;padding-right:3;background-color:blue;height:100%" valign=top>
content<br>
content<br>
content<br>
content<br>
content<br> </td>
<td bgcolor=#cccccc style="cursor:e-resize;width:1" onmousedown=MouseDownToResize(this) onmousemove=MouseMoveToResize(this,true,false) onmouseup=MouseUpToResize(this) ></td>
</tr>
<tr style="font-size:1">
<td bgcolor=#cccccc style="cursor:n-resize;" onmousedown=MouseDownToResize(this) onmousemove=MouseMoveToResize(this,false,true) onmouseup=MouseUpToResize(this) ></td>
<td bgcolor=#cccccc style="cursor:se-resize;" onmousedown=MouseDownToResize(this) onmousemove=MouseMoveToResize(this,true,true) onmouseup=MouseUpToResize(this) ></td>
</tr>
</table>
</body>
</html><script language=javascript>
var theAlterableTable=null;
var beginMoving=false;
var beginResizing=false;function MouseDownToRemove(obj){
theAlterableTable=obj.offsetParent;
obj.mouseDownX=event.clientX;
obj.mouseDownY=event.clientY;
obj.offsetParentOffsetLeft=theAlterableTable.offsetLeft;
obj.offsetParentOffsetTop=theAlterableTable.offsetTop;
beginMoving=true;
obj.setCapture();
}
function MouseMoveToRemove(obj){
if(!beginMoving) return false;
if(event.x>1) //防止被移出页面之外，造成无法移回的后果
theAlterableTable.style.left = obj.offsetParentOffsetLeft+(event.x-obj.mouseDownX);
if(event.y>1)
theAlterableTable.style.top = obj.offsetParentOffsetTop+(event.y-obj.mouseDownY);;
}
function MouseUpToRemove(obj){
obj.releaseCapture();
beginMoving=false;
}function MouseDownToResize(obj){
beginResizing=true;
obj.setCapture();
theAlterableTable.w=event.x-theAlterableTable.style.pixelWidth;
theAlterableTable.h=event.y-theAlterableTable.style.pixelHeight;
}
function MouseMoveToResize(obj,changeW,changeH){
if(!beginResizing) return false;
try //try 的目的是：屏敝给width赋负值的意外
{
if(changeW) theAlterableTable.style.width = event.x-theAlterableTable.w;
if(changeH) theAlterableTable.style.height = event.y-theAlterableTable.h;
}
catch(e){;}
}
function MouseUpToResize(obj){
obj.releaseCapture();
beginResizing=false;}</script>
<tr>
<td style='cursor:default;' onmousedown=Down(this) onmousemove=Remove(this) onmouseup=Up(this)>
title
</td>
</tr>
<tr>
<td style='background-color:blue;height:100%' valign=top>
content
</td>
</tr>
<tr>
<td style='cursor:se-resize;' onmousedown=Down(this) onmousemove=Resize(this) onmouseup=Up(this)>
state
</td>
</tr>
</table><script>
/**
* obj当前单元格，Obj整个表，动作标记
*/
var Obj; function Down(obj){
Obj = obj.offsetParent;
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;
obj.setCapture(); //得到鼠标
} function Remove(obj){
if(Obj != null){
/**
* 新的父元素位置 = 鼠标当前位置 - 鼠标起始位置 + 父元素当前位置
*/
obj.offsetParent.style.left = event.x - obj.x + obj.l;
obj.offsetParent.style.top = event.y - obj.y + obj.t;
}
} function Resize(obj){
if(Obj != null){
obj.offsetParent.style.width = event.x - obj.x + obj.w;
obj.offsetParent.style.height = event.y - obj.y + obj.h;
}
} function Up(obj){
Obj = null;
obj.releaseCapture(); //释放鼠标
}</script>用函数调用写出来了，能不能写成类的形式呢？
<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
* 邮件: [email protected]
* 网址: 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>