<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> window Drag (change size/minimize/maximize/restore/close) </title>
<style type= "Text/css" >
body,div,h2{margin:0;padding:0;}
Body{background:url (/jscss/demoimg/201205/bg.jpg); font:12px/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{font-size:14px;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 (/jscss/ demoimg/201205/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 (/jscss/demoimg/201205/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" >
/*-------------------------- +
Get ID, class, TagName
+-------------------------- */
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;
/*-------------------------- +
Drag and drop functions
+-------------------------- */
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
};
Maximize button
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";
};
Restore button
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";
};
Minimize button
Omin.onclick = Oclose.onclick = function ()
{
ODrag.style.display = "None";
var OA = document.createelement ("a");
Oa.classname = "open";
Oa.href = "javascript:;";
Oa.title = "Restore";
Document.body.appendChild (OA);
Oa.onclick = function ()
{
ODrag.style.display = "block";
Document.body.removeChild (this);
This.onclick = null;
};
};
Stop bubbling
Omin.onmousedown = Omax.onmousedown = Oclose.onmousedown = function (event)
{
This.onfocus = function () {This.blur ()};
(Event | | window.event). cancelbubble = True
};
}
/*-------------------------- +
Change size function
+-------------------------- */
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);
Four corners
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);
Four sides
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>
<body>
<div id= "Drag" >
<div class= "title" >
<div>
<a class= "min" href= "javascript:;" title= "Minimize" ></a>
<a class= "Max" href= "javascript:;" title= "Maximize" ></a>
<a class= "revert" href= "javascript:;" title= "Restore" ></a>
<a class= "Close" href= "javascript:;" title= "Close" ></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" >
① window can be dragged; <br/>
② window can change size in eight directions; <br/>
③ window can be minimized, maximized, restored, closed; <br/>
④ Limit the minimum width/height of the window.
</div>
</div>
<div><a href= "http://www.999jiujiu.com/" >http://www.999jiujiu.com/</A></div>
</body>
Beautiful JS drag layer, window drag (change size/minimize/maximize/restore/close)
