Tip: you can modify some code before running
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><ptml xmlns="http://www.w3.org/1999/xhtml"><pead><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 (img/bg.jpg); font: 12px/1.5 5fae8f6f96c59ed1; 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 (img/tool.png) no-repeat;}. open {position: absolute; top: 10px; left: 50%; margin-left:-10px; background-position: 0 0;}. open: hover {background-position: 0-29px;} # drag. title. min {background-position:-29px 0;} # drag. title. min: hover {background-position:-29px-29px;} # drag. title. max {background-position:-60px 0;} # drag. title. max: hover {background-position:-60px-29px;} # drag. title. revert {background-position:-149px 0; display: none ;}# drag. title. revert: hover {background-position:-149px-29px;} # drag. title. close {background-position:-89px 0;} # drag. title. 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 (img/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 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 & (I L = 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 for the maximize button. onclick = function () {oDrag. style. top = oDrag. style. le Ft = 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. offsetWidt H)/2 + "px"; oDrag. style. top = (document.doc umentElement. clientHeight-oDrag. offsetHeight)/2 + "px"; this. style. display = "none"; oMax. style. display = "block" ;}; // The 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 () {oD Rag. style. display = "block"; document. body. removeChild (this); this. onclick = null ;};}; // block bubbling 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. onmousedow N = 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-corner resize (oDrag, oLT, true, true, false, false ); resize (oDrag, oTR, false, true, false, false); resize (oDrag, oBR, 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, 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></pead><body><div id="drag"> <div class="title"> <p>This is a drag-and-drop window.</p> <div> </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></body></ptml></td> </tr></table>
Tip: you can modify some code before running
