<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
<html xmlns=
"http://www.w3.org/1999/xhtml"
>
<head>
<meta http-equiv=
"Content-Type"
content=
"text/html; charset=utf-8"
/>
<title>窗口拖拽(改变大小/最小化/最大化/还原/关闭)</title>
<style type=
"text/css"
>
body,div,h2{margin:0;padding:0;}
body{background:url(images/bg.jpg);font:14px/1.5 \5fae\8f6f\96c5\9ed1;color:
#333;}
#drag{position:absolute;top:100px;left:100px;width:300px;height:160px;background:#e9e9e9;border:1px solid #444;border-radius:5px;box-shadow:0 1px 3px 2px #666;}
#drag .title{position:relative;height:27px;margin:5px;}
#drag .title h2{height:27px;line-height:24px;border-bottom:1px solid #A1B4B0;}
#drag .title div{position:absolute;height:19px;top:2px;right:0;}
#drag .title a,a.open{float:left;width:21px;height:19px;display:block;margin-left:5px;background:url(images/tool.png) no-repeat;}
a.open{position:absolute;top:10px;left:50%;margin-left:-10px;background-position:0 0;}
a.open:hover{background-position:0 -29px;}
#drag .title a.min{background-position:-29px 0;}
#drag .title a.min:hover{background-position:-29px -29px;}
#drag .title a.max{background-position:-60px 0;}
#drag .title a.max:hover{background-position:-60px -29px;}
#drag .title a.revert{background-position:-149px 0;display:none;}
#drag .title a.revert:hover{background-position:-149px -29px;}
#drag .title a.close{background-position:-89px 0;}
#drag .title a.close:hover{background-position:-89px -29px;}
#drag .content{overflow:auto;margin:0 5px;}
#drag .resizeBR{position:absolute;width:14px;height:14px;right:0;bottom:0;overflow:hidden;cursor:nw-resize;background:url(images/resize.png) no-repeat;}
#drag .resizeL,#drag .resizeT,#drag .resizeR,#drag .resizeB,#drag .resizeLT,#drag .resizeTR,#drag .resizeLB{position:absolute;background:#000;overflow:hidden;opacity:0;filter:alpha(opacity=0);}
#drag .resizeL,#drag .resizeR{top:0;width:5px;height:100%;cursor:w-resize;}
#drag .resizeR{right:0;}
#drag .resizeT,#drag .resizeB{width:100%;height:5px;cursor:n-resize;}
#drag .resizeT{top:0;}
#drag .resizeB{bottom:0;}
#drag .resizeLT,#drag .resizeTR,#drag .resizeLB{width:8px;height:8px;background:#FF0;}
#drag .resizeLT{top:0;left:0;cursor:nw-resize;}
#drag .resizeTR{top:0;right:0;cursor:ne-resize;}
#drag .resizeLB{left:0;bottom:0;cursor:ne-resize;}
</style>
<script type=
"text/javascript"
>
var
get = {
byId:
function
(id) {
return
typeof
id ===
"string"
? document.getElementById(id) : id
},
byClass:
function
(sClass, oParent) {
var
aClass = [];
var
reClass =
new
RegExp(
"(^| )"
+ sClass +
"( |$)"
);
var
aElem =
this
.byTagName(
"*"
, oParent);
for
(
var
i = 0; i < aElem.length; i++) reClass.test(aElem[i].className) && aClass.push(aElem[i]);
return
aClass
},
byTagName:
function
(elem, obj) {
return
(obj || document).getElementsByTagName(elem)
}
};
var
dragMinWidth = 250;
var
dragMinHeight = 124;
function
drag(oDrag, handle)
{
var
disX = dixY = 0;
var
oMin = get.byClass(
"min"
, oDrag)[0];
var
oMax = get.byClass(
"max"
, oDrag)[0];
var
oRevert = get.byClass(
"revert"
, oDrag)[0];
var
oClose = get.byClass(
"close"
, oDrag)[0];
handle = handle || oDrag;
handle.style.cursor =
"move"
;
handle.onmousedown =
function
(event)
{
var
event = event || window.event;
disX = event.clientX - oDrag.offsetLeft;
disY = event.clientY - oDrag.offsetTop;
document.onmousemove =
function
(event)
{
var
event = event || window.event;
var
iL = event.clientX - disX;
var
iT = event.clientY - disY;
var
maxL = document.documentElement.clientWidth - oDrag.offsetWidth;
var
maxT = document.documentElement.clientHeight - oDrag.offsetHeight;
iL <= 0 && (iL = 0);
iT <= 0 && (iT = 0);
iL >= maxL && (iL = maxL);
iT >= maxT && (iT = maxT);
oDrag.style.left = iL +
"px"
;
oDrag.style.top = iT +
"px"
;
return
false
};
document.onmouseup =
function
()
{
document.onmousemove =
null
;
document.onmouseup =
null
;
this
.releaseCapture &&
this
.releaseCapture()
};
this
.setCapture &&
this
.setCapture();
return
false
};
oMax.onclick =
function
()
{
oDrag.style.top = oDrag.style.left = 0;
oDrag.style.width = document.documentElement.clientWidth - 2 +
"px"
;
oDrag.style.height = document.documentElement.clientHeight - 2 +
"px"
;
this
.style.display =
"none"
;
oRevert.style.display =
"block"
;
};
oRevert.onclick =
function
()
{
oDrag.style.width = dragMinWidth +
"px"
;
oDrag.style.height = dragMinHeight +
"px"
;
oDrag.style.left = (document.documentElement.clientWidth - oDrag.offsetWidth) / 2 +
"px"
;
oDrag.style.top = (document.documentElement.clientHeight - oDrag.offsetHeight) / 2 +
"px"
;
this
.style.display =
"none"
;
oMax.style.display =
"block"
;
};
oMin.onclick = oClose.onclick =
function
()
{
oDrag.style.display =
"none"
;
var
oA = document.createElement(
"a"
);
oA.className =
"open"
;
oA.href =
"javascript:;"
;
oA.title =
"还原"
;
document.body.appendChild(oA);
oA.onclick =
function
()
{
oDrag.style.display =
"block"
;
document.body.removeChild(
this
);
this
.onclick =
null
;
};
};
oMin.onmousedown = oMax.onmousedown = oClose.onmousedown =
function
(event)
{
this
.onfocus =
function
() {
this
.blur()};
(event || window.event).cancelBubble =
true
};
}
function
resize(oParent, handle, isLeft, isTop, lockX, lockY)
{
handle.onmousedown =
function
(event)
{
var
event = event || window.event;
var
disX = event.clientX - handle.offsetLeft;
var
disY = event.clientY - handle.offsetTop;
var
iParentTop = oParent.offsetTop;
var
iParentLeft = oParent.offsetLeft;
var
iParentWidth = oParent.offsetWidth;
var
iParentHeight = oParent.offsetHeight;
document.onmousemove =
function
(event)
{
var
event = event || window.event;
var
iL = event.clientX - disX;
var
iT = event.clientY - disY;
var
maxW = document.documentElement.clientWidth - oParent.offsetLeft - 2;
var
maxH = document.documentElement.clientHeight - oParent.offsetTop - 2;
var
iW = isLeft ? iParentWidth - iL : handle.offsetWidth + iL;
var
iH = isTop ? iParentHeight - iT : handle.offsetHeight + iT;
isLeft && (oParent.style.left = iParentLeft + iL +
"px"
);
isTop && (oParent.style.top = iParentTop + iT +
"px"
);
iW < dragMinWidth && (iW = dragMinWidth);
iW > maxW && (iW = maxW);
lockX || (oParent.style.width = iW +
"px"
);
iH < dragMinHeight && (iH = dragMinHeight);
iH > maxH && (iH = maxH);
lockY || (oParent.style.height = iH +
"px"
);
if
((isLeft && iW == dragMinWidth) || (isTop && iH == dragMinHeight)) document.onmousemove =
null
;
return
false
;
};
document.onmouseup =
function
()
{
document.onmousemove =
null
;
document.onmouseup =
null
;
};
return
false
;
}
};
window.onload = window.onresize =
function
()
{
var
oDrag = document.getElementById(
"drag"
);
var
oTitle = get.byClass(
"title"
, oDrag)[0];
var
oL = get.byClass(
"resizeL"
, oDrag)[0];
var
oT = get.byClass(
"resizeT"
, oDrag)[0];
var
oR = get.byClass(
"resizeR"
, oDrag)[0];
var
oB = get.byClass(
"resizeB"
, oDrag)[0];
var
oLT = get.byClass(
"resizeLT"
, oDrag)[0];
var
oTR = get.byClass(
"resizeTR"
, oDrag)[0];
var
oBR = get.byClass(
"resizeBR"
, oDrag)[0];
var
oLB = get.byClass(
"resizeLB"
, oDrag)[0];
drag(oDrag, oTitle);
resize(oDrag, oLT,
true
,
true
,
false
,
false
);
resize(oDrag, oTR,
false
,
true
,
false
,
false
);
resize(oDrag, oBR,
false
,
false
,
false
,
false
);
resize(oDrag, oLB,
true
,
false
,
false
,
false
);
resize(oDrag, oL,
true
,
false
,
false
,
true
);
resize(oDrag, oT,
false
,
true
,
true
,
false
);
resize(oDrag, oR,
false
,
false
,
false
,
true
);
resize(oDrag, oB,
false
,
false
,
true
,
false
);
oDrag.style.left = (document.documentElement.clientWidth - oDrag.offsetWidth) / 2 +
"px"
;
oDrag.style.top = (document.documentElement.clientHeight - oDrag.offsetHeight) / 2 +
"px"
;
}
</script>
</head>
<body>
<div id=
"drag"
>
<div class=
"title"
>
<h2>这是一个可以拖动的窗口</h2>
<div>
<a class=
"min"
href=
"javascript:;"
title=
"最小化"
></a>
<a class=
"max"
href=
"javascript:;"
title=
"最大化"
></a>
<a class=
"revert"
href=
"javascript:;"
title=
"还原"
></a>
<a class=
"close"
href=
"javascript:;"
title=
"关闭"
></a>
</div>
</div>
<div class=
"resizeL"
></div>
<div class=
"resizeT"
></div>
<div class=
"resizeR"
></div>
<div class=
"resizeB"
></div>
<div class=
"resizeLT"
></div>
<div class=
"resizeTR"
></div>
<div class=
"resizeBR"
></div>
<div class=
"resizeLB"
></div>
<div class=
"content"
>
① 窗口可以拖动;<br />
② 窗口可以通过八个方向改变大小;<br />
③ 窗口可以最小化、最大化、还原、关闭;<br />
④ 限制窗口最小宽度/高度。
</div>
</div>
</body>
</html>