<!--此特效来源来互联网,由 kudaa.com 收集整理-->
<!--精简兼容版拖动层-->
<style type="text/css" media="all" title="Default">
@import "main.css";
#dragDiv { -moz-user-select:none; position:absolute; border:1px double #000; background-color:buttonface; width:200px; height:100px; color:#CC0000; text-align:center;}
</style>
<body>
<div id="header">
<h3> drag demo change size or change layout </h3>
<hr/>
</div>
<div class="wraper">
<div id="dragDiv">
<input type="radio" value="size" name="custom" id="size" checked/>
<label for="size">拖动改变尺寸</label>
<input type="radio" value="layout" name="custom" id="layout"/>
<label for="layout">拖动改变布局</label>
Easy to write the drag code, <br/>this is a simple demo, <br/>by never-online</div></div>
<script type="text/javascript">
//<![CDATA[
function GetA(a,b)
var getAbsoluteCoords = function (e) {
var width = e.offsetWidth;
var height = e.offsetHeight;
var left = e.offsetLeft;
var top = e.offsetTop;
while (e=e.offsetParent) {
left += e.offsetLeft;
top += e.offsetTop;
};
var right = left+width;
var bottom = top+height;
return {
'width': width,
'height': height,
'left': left,
'top': top,
'right': right,
'bottom': bottom
};
};
var getElementById = function (sId) {
return document.getElementById(String(sId));
};
/* Kernel code, drag div change the coords */
/* by never-online, http://www.never-online.net */
var wrapId = "dragDiv"; var wrap = getElementById(wrapId);
var isChangeLayout;
wrap.onmouseover = function () {
isChangeLayout=getElementById('layout').checked?true:false;
wrap.style.cursor = isChangeLayout?"move":"se-resize";
if (window.ActiveXObject)
wrap.onselectstart = function () { event.returnValue = false; }
document.onmousedown = function (evt) {
/* save the original coordinates */
evt = window.event||evt; var a=getAbsoluteCoords(wrap);
wrap.cx=evt.clientX-(isChangeLayout?a.left:a.width);
wrap.cy=evt.clientY-(isChangeLayout?a.top:a.height);
document.onmousemove = function (evt) {
/* change the coords when mouse is moveing */
evt = window.event||evt; try {
if (isChangeLayout) {
wrap.style.left = (evt.clientX-wrap.cx)+"px";
wrap.style.top = (evt.clientY-wrap.cy)+"px";
} else {
wrap.style.width = (evt.clientX-wrap.cx)+"px";
wrap.style.height = (evt.clientY-wrap.cy)+"px";
}
} catch (ex) {};
};
document.onmouseup = function () {
/* drag end release the event */
document.onmousemove = null;
document.onmouseup = null;
wrap.style.cursor="default";
};
};
}
//]]>
</script>
</body>
