JavaScript implements beautiful drag layer, window drag effect
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:///TR/xhtml1/DTD/">
<html xmlns="http:///1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Drag the window（Change the size/Minimize/maximize/reduction/closure）</title>
<style type="text/css">
body,div,h2{margin:0;padding:0;}
body{background:url(/jscss/demoimg/201205/);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,{float:left;width:21px;height:19px;display:block;margin-left:5px;background:url(/jscss/demoimg/201205/) no-repeat;}
{position:absolute;top:10px;left:50%;margin-left:-10px;background-position:0 0;}
:hover{background-position:0 -29px;}
#drag .title {background-position:-29px 0;}
#drag .title :hover{background-position:-29px -29px;}
#drag .title {background-position:-60px 0;}
#drag .title :hover{background-position:-60px -29px;}
#drag .title {background-position:-149px 0;display:none;}
#drag .title :hover{background-position:-149px -29px;}
#drag .title {background-position:-89px 0;}
#drag .title :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/) 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" ? (id) : id
},
byClass: function(sClass, oParent) {
var aClass = [];
var reClass = new RegExp("(^| )" + sClass + "( |$)");
var aElem = ("*", oParent);
for (var i = 0; i < ; i++) (aElem[i].className) && (aElem[i]);
return aClass
},
byTagName: function(elem, obj) {
return (obj || document).getElementsByTagName(elem)
}
};
var dragMinWidth = 250;
var dragMinHeight = 124;
/*-------------------------- +
Drag and drop function
+-------------------------- */
function drag(oDrag, handle)
{
var disX = dixY = 0;
var oMin = ("min", oDrag)[0];
var oMax = ("max", oDrag)[0];
var oRevert = ("revert", oDrag)[0];
var oClose = ("close", oDrag)[0];
handle = handle || oDrag;
= "move";
= function (event)
{
var event = event || ;
disX = - ;
disY = - ;
= function (event)
{
var event = event || ;
var iL = - disX;
var iT = - disY;
var maxL = - ;
var maxT = - ;
iL <= 0 && (iL = 0);
iT <= 0 && (iT = 0);
iL >= maxL && (iL = maxL);
iT >= maxT && (iT = maxT);
= iL + "px";
= iT + "px";
return false
};
= function ()
{
= null;
= null;
&& ()
};
&& ();
return false
};
//Maximize button = function ()
{
= = 0;
= - 2 + "px";
= - 2 + "px";
= "none";
= "block";
};
//Restore button = function ()
{
= dragMinWidth + "px";
= dragMinHeight + "px";
= ( - ) / 2 + "px";
= ( - ) / 2 + "px";
= "none";
= "block";
};
//Minimize button = = function ()
{
= "none";
var oA = ("a");
= "open";
= "javascript:;";
= "reduction";
(oA);
= function ()
{
= "block";
(this);
= null;
};
};
//Stop bubbles = = = function (event)
{
= function () {()};
(event || ).cancelBubble = true
};
}
/*-------------------------- +
Change the size function
+-------------------------- */
function resize(oParent, handle, isLeft, isTop, lockX, lockY)
{
= function (event)
{
var event = event || ;
var disX = - ;
var disY = - ;
var iParentTop = ;
var iParentLeft = ;
var iParentWidth = ;
var iParentHeight = ;
= function (event)
{
var event = event || ;
var iL = - disX;
var iT = - disY;
var maxW = - - 2;
var maxH = - - 2;
var iW = isLeft ? iParentWidth - iL :
+ iL;
var iH = isTop ? iParentHeight - iT : + iT;
isLeft && ( = iParentLeft + iL + "px");
isTop && ( = iParentTop + iT + "px");
iW < dragMinWidth && (iW = dragMinWidth);
iW > maxW && (iW = maxW);
lockX || ( = iW + "px");
iH < dragMinHeight && (iH = dragMinHeight);
iH > maxH && (iH = maxH);
lockY || ( = iH + "px");
if((isLeft && iW == dragMinWidth) || (isTop && iH == dragMinHeight)) = null;
return false;
};
= function ()
{
= null;
= null;
};
return false;
}
};
= = function ()
{
var oDrag = ("drag");
var oTitle = ("title", oDrag)[0];
var oL = ("resizeL", oDrag)[0];
var oT = ("resizeT", oDrag)[0];
var oR = ("resizeR", oDrag)[0];
var oB = ("resizeB", oDrag)[0];
var oLT = ("resizeLT", oDrag)[0];
var oTR = ("resizeTR", oDrag)[0];
var oBR = ("resizeBR", oDrag)[0];
var oLB = ("resizeLB", oDrag)[0];
drag(oDrag, oTitle);
//Four cornersresize(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 sidesresize(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);
= ( - ) / 2 + "px";
= ( - ) / 2 + "px";
}
</script>
</head>
<body>
<div >
<div class="title">
<h2>This is a draggable window</h2>
<div>
<a class="min" href="javascript:;" title="Minimize"></a>
<a class="max" href="javascript:;" title="maximize"></a>
<a class="revert" href="javascript:;" title="reduction"></a>
<a class="close" href="javascript:;" title="closure"></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 />
② 窗口可以通过八个方向Change the size；<br />
③ 窗口可以Minimize、maximize、reduction、closure；<br />
④ Limit the minimum window width/high。
</div>
</div>
</body>
</html>
The above is the entire content of this article, I hope you like it.