能够自由拖动布局区域的网页

cn_arthurs

浏览: 322203 次
性别:
来自: 北京

最近访客更多访客>>

ningzong

shdavidzhang

robotmen

zhang_sun

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

web应用

JavaScript CSS Ajax J#网络应用

<html>
<head>
<title>能够自由拖动布局区域的网页</title>
<style type="text/css">
<!--
body{
	font-size:12px;
	font-family:Arial, Helvetica, sans-serif;
	margin:0px; padding:0px;
	/*background-color:#ffffd5;*/
	background-color:#e6ffda;
}
.dragTable{
	font-size:12px;
	/*border:1px solid #003a82;*/
	border:1px solid #206100;
	margin-bottom:5px;
	width:100%;
	/*background-color:#cfe5ff;*/
	background-color:#c9ffaf;
}
td{
	padding:3px 2px 3px 2px;
	vertical-align:top;
}
.dragTR{
	cursor:move;
	/*color:#FFFFFF;
	background-color:#0073ff;*/
	color:#ffff00;
	background-color:#3cb500;
	height:20px;
	font-weight:bold;
	font-size:14px;
	font-family:Arial, Helvetica, sans-serif;
}
#parentTable{
	border-collapse:collapse;
}
-->
</style>
<script language="javascript" defer="defer">
var Drag={
	dragged:false,
	ao:null,
	tdiv:null,
	dragStart:function(){
		Drag.ao=event.srcElement;
		if((Drag.ao.tagName=="TD")||(Drag.ao.tagName=="TR")){
			Drag.ao=Drag.ao.offsetParent;
			Drag.ao.style.zIndex=100;
		 }else
		 	return;
		Drag.dragged=true;
		Drag.tdiv=document.createElement("div");
		Drag.tdiv.innerHTML=Drag.ao.outerHTML;
		Drag.ao.style.border="1px dashed red";
		Drag.tdiv.style.display="block";
		Drag.tdiv.style.position="absolute";
		Drag.tdiv.style.filter="alpha(opacity=70)";
		Drag.tdiv.style.cursor="move";
		Drag.tdiv.style.border="1px solid #000000";
		Drag.tdiv.style.width=Drag.ao.offsetWidth;
		Drag.tdiv.style.height=Drag.ao.offsetHeight;
		Drag.tdiv.style.top=Drag.getInfo(Drag.ao).top;
		Drag.tdiv.style.left=Drag.getInfo(Drag.ao).left;
		document.body.appendChild(Drag.tdiv);
		Drag.lastX=event.clientX;
		Drag.lastY=event.clientY;
		Drag.lastLeft=Drag.tdiv.style.left;
		Drag.lastTop=Drag.tdiv.style.top;
	},
	draging:function(){//判断MOUSE的位置
		if(!Drag.dragged||Drag.ao==null)return;
		var tX=event.clientX;
		var tY=event.clientY;
		Drag.tdiv.style.left=parseInt(Drag.lastLeft)+tX-Drag.lastX;
		Drag.tdiv.style.top=parseInt(Drag.lastTop)+tY-Drag.lastY;
		for(var i=0;i<parentTable.cells.length;i++){
			var parentCell=Drag.getInfo(parentTable.cells[i]);
			if(tX>=parentCell.left&&tX<=parentCell.right&&tY>=parentCell.top&&tY<=parentCell.bottom){
				var subTables=parentTable.cells[i].getElementsByTagName("table");
				if(subTables.length==0){
					if(tX>=parentCell.left&&tX<=parentCell.right&&tY>=parentCell.top&&tY<=parentCell.bottom){
						parentTable.cells[i].appendChild(Drag.ao);
					}
					break;
				}
				for(var j=0;j<subTables.length;j++){
					var subTable=Drag.getInfo(subTables[j]);
					if(tX>=subTable.left&&tX<=subTable.right&&tY>=subTable.top&&tY<=subTable.bottom){
						parentTable.cells[i].insertBefore(Drag.ao,subTables[j]);
						break;
					}else{
						parentTable.cells[i].appendChild(Drag.ao);
					}
				}
			}
		}
	},
	dragEnd:function(){
		if(!Drag.dragged)
			return;
		Drag.dragged=false;
		Drag.mm=Drag.repos(150,15);
		Drag.ao.style.borderWidth="0px";
		//Drag.ao.style.border="1px solid #003a82";
		Drag.ao.style.border="1px solid #206100";
		Drag.tdiv.style.borderWidth="0px";
		Drag.ao.style.zIndex=1;
	},
	getInfo:function(o){//取得坐标
		var to=new Object();
		to.left=to.right=to.top=to.bottom=0;
		var twidth=o.offsetWidth;
		var theight=o.offsetHeight;
		while(o!=document.body){
			to.left+=o.offsetLeft;
			to.top+=o.offsetTop;
			o=o.offsetParent;
		}
		to.right=to.left+twidth;
		to.bottom=to.top+theight;
		return to;
	},
	repos:function(aa,ab){
		var f=Drag.tdiv.filters.alpha.opacity;
		var tl=parseInt(Drag.getInfo(Drag.tdiv).left);
		var tt=parseInt(Drag.getInfo(Drag.tdiv).top);
		var kl=(tl-Drag.getInfo(Drag.ao).left)/ab;
		var kt=(tt-Drag.getInfo(Drag.ao).top)/ab;
		var kf=f/ab;
		return setInterval(function(){
			if(ab<1){
				clearInterval(Drag.mm);
				Drag.tdiv.removeNode(true);
				Drag.ao=null;
				return;
			}
			ab--;
			tl-=kl;
			tt-=kt;
			f-=kf;
			Drag.tdiv.style.left=parseInt(tl)+"px";
			Drag.tdiv.style.top=parseInt(tt)+"px";
			Drag.tdiv.filters.alpha.opacity=f;
		}
		,aa/ab)
	},
	inint:function(){
		for(var i=0;i<parentTable.cells.length;i++){
			var subTables=parentTable.cells[i].getElementsByTagName("table");
			for(var j=0;j<subTables.length;j++){
				if(subTables[j].className!="dragTable")
					break;
				subTables[j].rows[0].className="dragTR";
				subTables[j].rows[0].attachEvent("onmousedown",Drag.dragStart);
			}
		}
		document.onmousemove=Drag.draging;
		document.onmouseup=Drag.dragEnd;
	}
}
Drag.inint();
</script>
   </head>
<body>
<table cellspacing="4" width="100%" id="parentTable">
<tr>
	<td width="25%" valgin="top">
		<table class="dragTable" cellspacing="0">
			<tr><td>CSS</td></tr>
			<tr><td>CSS（Cascading Style Sheet），中文译为层叠样式表，是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。CSS是1996年由W3C审核通过，并且推荐使用的。</td><tr>
		</table>
		<table class="dragTable" cellspacing="0">
			<tr><td>AJAX</td></tr>
			<tr><td>Ajax（Asynchronous JavaScript and XML，异步JavaScript和XML）是目前很新的一项网络应用技术。</td><tr>
		</table>
	</td>
	<td width="25%">
		<table class="dragTable" cellspacing="0">
			<tr><td>Javascript</td></tr>
			<tr><td>Javascript是一种基于对象的脚本语言，使用它可以开发Internet客户端的应用程序。Javascript在HTML页面中以语句的方式出现，并且执行相应的操作。</td><tr>
		</table>
	</td>
	<td width="25%">
		<table class="dragTable" cellspacing="0">
			<tr><td>XML</td></tr>
			<tr><td>XML是eXtensible Markup Language的缩写，即可扩展标记语言。它是一种可以用来创建自定义标记的语言，由万维网协会（W3C）创建，用来克服HTML的局限。</td><tr>
		</table>
		<table class="dragTable" cellspacing="0">
			<tr><td>网页变幻</td></tr>
			<tr><td>保持页面的HTML不变，通过分别调用三个外部CSS文件，实现三个完全不同的页面效果，蓝色经典、清明上河图、交河古城。</td><tr>
		</table>
	</td>
</tr>
</table>
</body>
</html>

以上代码摘自《精通CSS+DIV》一书第15章

分享到：

使用dhtmltree动态生成树菜单总结 | jquery+json小例子

2009-03-11 09:54
浏览 2465
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

能够自由拖动布局区域的网页

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

能够自由拖动布局区域的网页

评论

发表评论

相关推荐

禁止页面放大缩小

在web.xml中添加多个filter

tomcat无法启动

XML to JSON

ajax tree框架(zTree)

通过HttpClient发送Web Service请求

使用JES搭建小巧的Mail服务器

struts2+spring2+hibernate3所需要的最少jar包

Struts2中获取requset,session,application

struts2.0中struts.xml配置文件详解(转)

struts2-Unable to load configuration. - bean - jar

[转载]企业级SOA之路——在Web Service中使用HTTP和JMS

XAMPP虚拟主机配置，实现单主机多个站点

thinkphp中使用ajax接收json数据

基于服务器推的web im（未实现）

使用dhtmltree动态生成树菜单总结

jquery+json小例子

在OpenFire的基础上安装JWChat 1.0

JSON介绍

关于SSO跨应用访问操作解决思路

最近访客更多访客>>