`
cn_arthurs
  • 浏览: 327113 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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

JavaScriptCSSAjaxJ#网络应用 
阅读更多 
<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章

分享到：
| jquery+json小例子
评论
发表评论

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

相关推荐

    Ajax自由拖动网页布局

    Ajax 自由拖动网页布局是一种技术，用于创建用户可以自由调整元素位置的互动式网页。这一技术结合了Asynchronous JavaScript and XML（Ajax）的核心特点，实现了无刷新更新页面，为用户提供流畅、直观的交互体验。在...

    自定义拖动布局首页,像QQ空间那样,拖动布局

    ### 自定义拖动布局首页知识点解析 #### 一、标题与描述解读 - **标题**：“自定义拖动布局首页,像QQ空间那样,拖动布局”：这表明该页面的目标是实现一种类似QQ空间的自定义拖动布局功能。用户能够通过鼠标拖动来...

    jquery 创建div块 拖动 布局代码

    通过这样的方式，我们可以创建一个动态且交互性强的网页布局，用户可以自由调整`div`块的位置，提升网页的可用性和趣味性。对于开发者来说，熟练掌握这种技术不仅可以丰富网页设计手段，还能提高用户满意度，是现代...

    拖动的个性化网页布局

    【拖动的个性化网页布局】是一种现代网页设计技术，...通过掌握以上这些技术点，开发者可以创建出一个功能完善的、具有拖动个性化布局的网页应用，使用户能够根据个人喜好自由调整页面元素，提升其在网站上的互动体验。

    winform自由拖动控件，模拟设计器

    实现这样的自由拖动功能后，用户就可以在运行时自由地调整控件布局，极大地提高了应用的交互性和用户体验。这种模拟设计器的概念使得非程序员也能轻松定制界面，类似于可视化编程的理念。 总的来说，"winform自由...

    jQuery ui定位层带删除按钮拖动布局排序代码

    jQuery UI库提供了一套丰富的组件和工具，使得开发者能够轻松创建具有高级交互特性的网页应用。本篇文章将深入探讨如何利用jQuery UI实现定位层带删除按钮的拖动布局排序功能。 首先，jQuery UI中的`draggable`和`...

    jquery拖拽排序插件div自由拖动排序代码

    在给定的标题“jquery拖拽排序插件div自由拖动排序代码”中，我们主要讨论的是如何利用jQuery实现一个功能，让用户能够自由地通过拖放操作来对页面上的div元素进行排序。这种功能在许多应用场景中都非常实用，比如...

    网页拖动菜单控件

    这样可以提高代码的灵活性，减少样式依赖，让布局和样式设计更加自由。 在实现过程中，可能还需要考虑以下几点： 1. **边界检测**：确保菜单项只能在指定区域内拖放，防止超出边界。 2. **事件阻止**：阻止默认的...

    可以自由拖动的div ,类似于igoogle个性化首页

    在IT行业中，创建一个可以自由拖动的div页面布局，类似于Google的iGoogle个性化首页，是一种常见的用户界面设计技巧。这种设计允许用户根据个人喜好调整和定制内容的显示方式，提高用户体验。以下将详细讲解实现这个...

    仿Google小工具jQuery拖动特效适用于用户自定义拖动层布局.zip

    6. **自定义布局**：用户自定义拖动层布局意味着用户可以根据需求自由排列元素。这通常需要维护一个数据结构（如数组或对象），记录每个元素的位置信息，并在拖放操作完成后更新这个结构，以便在后续页面刷新或重载...

    QT自定义窗口 自由拖动 自定义标题

    本文将深入探讨如何在QT中创建自定义窗口，并实现自由拖动和自定义标题的功能。 首先，我们需要了解QT中的QMainWindow类，它是大多数QT应用程序的基础，提供了菜单、工具栏和状态栏等标准窗口元素。然而，为了...

    jQuery可拖动网格布局排列代码.zip

    在这个项目中，我们将探讨如何使用jQuery来创建一个可拖动的网格布局系统，用户可以自由调整元素的位置，从而实现个性化界面的布局。 首先，我们需要理解网格布局的基本概念。网格布局是一种将页面划分为多个单元格...

    jQuery+ui自由拖动浮动层

    这在创建交互式网页应用，如对话框、工具提示或自定义布局时非常有用。浮动层通常是指在页面上可以自由移动的元素，例如弹出窗口或悬浮菜单。 要实现"jQuery+ui自由拖动浮动层"，首先需要在HTML文件中引入jQuery和...

    《精通CSS+DIV网页样式与布局》光盘源码

    　15.3　Ajax实例：能够自由拖动布局区域的网页　 第4部分　综合案例篇 　第16章　我的博客　 　16.1　分析构架　 　16.2　模块拆分　 　16.3　整体调整　 　第17章　小型工作室网站　 　17.1　分析构架　 　17.2　...

    jquery splitter 动态分割区域布局，支持动态拖拉，功能强大，简单易用

    jQuery Splitter插件就是这样一个强大的工具，它允许用户通过拖动分割线来实现布局的灵活调整，与Visual Studio 2010中的拖拉区域条功能类似，极大地提高了用户体验。 jQuery Splitter是基于JavaScript库jQuery的一...

    精通CSS.DIV.网页样式与布局 源码

    　15.3　Ajax实例：能够自由拖动布局区域的网页　 第4部分　综合案例篇 　第16章　我的博客　 　16.1　分析构架　 　16.2　模块拆分　 　16.3　整体调整　 　第17章　小型工作室网站　 　17.1　分析构架　 ...

    Delphi实现控件拖动及改变大小

    在这个新的类中，重写WndProc方法，处理WM_NCHITTEST消息，来实现自定义的拖动区域。同时，你需要处理WM_SIZE消息来处理控件的大小改变。 **实现控件大小改变的策略** 1. **OnResize事件**：Delphi中的控件有...

    GoldenLayout终极JavaScript布局管理器

    它允许开发者在Web应用中实现灵活多样的窗口布局，包括分割面板、堆叠区域、可拖动和可调整大小的组件等。这款库在前端开发领域中广泛应用于数据可视化、编辑器工具、仪表板和其他需要高度定制用户界面的场景。 ...

    JQ JS javascript layui UI组件 元素 div 拖动插件

    通过学习和使用这个插件，开发者可以提升其项目中的交互性和用户友好性，使得用户能够更自由地自定义页面布局或管理内容。同时，这也是理解JavaScript事件处理、DOM操作和第三方库集成的好实践。

    JKDrag 拖动行，拖动列，拖动模块

    - **阻力反馈**：在接近边界或已满区域时，拖动元素会感受到阻力，增加交互的真实感。 - **拖放指示器**：在拖动过程中显示指示器，预览元素被放置的位置。 五、使用教程 使用JKDrag通常需要集成框架，配置数据源和...

Magicbox
Global site tag (gtag.js) - Google Analytics