<!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" />
<head>
<title> drag demo change size or change layout - http://www.never-online.net </title>
<meta http-equiv="ImageToolbar" content="no" />
<meta name="author" content="never-online, BlueDestiny"/>
<meta name="keywords" content="drag, custom layout, never modules, Mozilla CSS, C#, .net, Reference, BlueDestiny, never-online"/>
<meta name="description" content="drag demo change size or change layout, javascript reference, c sharp artilces"/>
<meta name="creator.name" content="never-online, BlueDestiny" />
<style type="text/css" media="all" title="Default">
#dragDiv { -moz-user-select:none; position:absolute; border:1px double #000; background-color:buttonface; width:200px; height:100px; color:#CC0000; text-align:center;}
</style>
</head>
<body id="www.never-online.net">
<div class="wraper">
<div class="content">
<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>
</div>
</div>
<div id="dragDiv">
<input type=button />
</div>
<script type="text/javascript">
//<![CDATA[
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>
</html>
扫一扫
187
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
