js简单拖动模型

在google个性化首页和tom网都有这种自定义网页布局的应用，兴趣所至，自己动手写了一个js拖动模型，发出来共享一下，声明：只是阐述拖动的基本原理，仅供参考：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>zhenn's space</title>
<style type="text/css">
body{ position:relative}
*{ line-height:20px; margin:0; padding:0;}
#drag{ border:1px solid blue; width:300px; height:300px; position:absolute; left:10px; top:10px; z-index:9999; background:#fff;}
#title{ line-height:24px; background:red; text-align:center; font-weight:bold; font-size:14px; color:#fff; width:100%;}
#layout{ position:absolute; z-index:1; background:blue; opacity:0.3; filter:alpha(opacity=30); display:none; top:0; left:0;}
</style>
</head>

<body>
<script type="text/javascript">
function getY(e){
	e = e || window.event; //标准化事件对象
	return e.pageY ? e.pageY : (e.clientY + document.documentElement.scrollTop);
}
function getX(e){
	e = e || window.event;
	return e.pageX ? e.pageX : (e.clientX + document.documentElement.scrollLeft);
}  //获得鼠标的坐标值

function GapsX(elem){
	return !elem.offsetParent ? elem.offsetLeft : ( elem.offsetLeft + GapsX(elem.offsetParent) ); 
} //对象距窗口最左端的偏移量（包括由于滚动条隐藏的部分）

function GapsY(elem){
	return !elem.offsetParent ? elem.offsetTop : ( elem.offsetTop + GapsY(elem.offsetParent) ); 
}//对象距窗口最顶端的偏移量（包括由于滚动条隐藏的部分）
window.onload = function(){
	var tit = document.getElementById('title');
	var dragelem = document.getElementById('drag');
	var layoutdiv = document.getElementById('layout');
	tit.onmousedown = function(e){
		var x = getX(e) - GapsX(this);
		var y = getY(e) - GapsY(this);
		document.onmousemove = function(e){
		  dragelem.style.left = getX(e) - x + 'px';
		  dragelem.style.top = getY(e) -y + 'px';
		  layoutdiv.style.display = 'block';
		  layoutdiv.style.width = document.body.offsetWidth + 'px';
		  if(document.body.offsetHeight < document.documentElement.clientHeight){
		  	layoutdiv.style.height = document.documentElement.clientHeight + 'px';
		  }else{
		  	layoutdiv.style.height = document.body.offsetHeight + 'px';
		  }
		}
	}
	document.onmouseup = function(){
	   document.onmousemove = null;
	   layoutdiv.style.display = '';
	}
}
</script>
<div id="drag">
	<div id="title" style="cursor:move;">拖动层</div>
	<div class="content">这里是内容区</div>
</div>
<div id="layout"></div>
<script type="text/javascript">
for(i=0;i<120;i++){
	document.write("this is a test."+"<br>");
}
</script>
</body>
</html>

posted on 2011-02-19 21:40 zhenn 阅读(378) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

关于我

振之博文

js简单拖动模型

公告

导航