Home > Developer > Web Develop
Nice Js drag layer, window drag (change size/minimize/maximize/restore/Close), js window
<! 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> drag and drop a window (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,. 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 fig = 124;
/* -------------------------- +
Drag Function
+ --------------------------*/
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.doc umentElement. clientWidth-oDrag. offsetWidth;
Var maxT = document.doc umentElement. 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.doc umentElement. clientWidth-2 + "px ";
ODrag. style. height = document.doc umentElement. 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.doc umentElement. clientWidth-oDrag. offsetWidth)/2 + "px ";
ODrag. style. top = (document.doc umentElement. clientHeight-oDrag. offsetHeight)/2 + "px ";
This. style. display = "none ";
OMax. style. display = "block ";
};
// Minimization button
OMin. onclick = oClose. onclick = function ()
{
ODrag. style. display = "none ";
Var oA = document. createElement ("");
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 bubbles
OMin. onmousedown = oMax. onmousedown = oClose. onmousedown = function (event)
{
This. onfocus = function () {this. blur ()};
(Event | window. event). cancelBubble = true
};
}
/* -------------------------- +
Function for changing the size
+ --------------------------*/
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.doc umentElement. clientWidth-oParent. offsetLeft-2;
Var maxH = document.doc umentElement. 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 );
Resize (oDrag, oLB, true, false );
// Four Sides
Resize (oDrag, oL, true, false, false, true );
Resize (oDrag, oT, false, true, true, false );
Resize (oDrag, oR, false, true );
Resize (oDrag, oB, false, false, true, false );
ODrag. style. left = (document.doc umentElement. clientWidth-oDrag. offsetWidth)/2 + "px ";
ODrag. style. top = (document.doc umentElement. clientHeight-oDrag. offsetHeight)/2 + "px ";
}
</Script>
</Head>
<Body>
<Div id = "drag">
<Div class = "title">
<H2> This is a drag-and-drop window. <Div>
<A class = "min" href = "javascript:;" title = "minimal"> </a>
<A class = "max" href = "javascript:;" title = "maximized"> </a>
<A class = "revert" href = "javascript:;" title = "restored"> </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">
① The window can be dragged. <br/>
② The window size can be changed in eight directions. <br/>
③ Windows can be minimized, maximized, restored, and closed. <br/>
④ Restrict the minimum width/height of the window.
</Div>
</Div>
<Div> <A href = "http://www.999jiujiu.com/"> http://www.999jiujiu.com/</A> </div>
</Body>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
