Asp.Net+Javascript+CSS(模仿google的拖拽的个性网页布局)
内容比较多,主要的是javascript代码,这个代码Tin's从是google的上弄下的 并且翻译好了.然后我用数据库保存了布局框架,程序用asp.net.
先看看数据库结构(2个表),
side表
SideID SideLeft SideCenter SideRight
1 1,3 2,4 5,6
SedeID 表示ID号表示唯一的
SideLeft 表示页面左侧的窗口的ID号,窗口号之间用逗号
SideCenter 表示页面中间的窗口ID号,窗口号之间用逗号
SideRight 表示页面右侧的窗口ID号,窗口号之间用逗号
WinInfo表
WinID WinName WinFlag
1 新浪新闻 1
2 个人简介 1
3 窗口1 0
4 窗口2 1
5 窗口3 1
6 窗口4 0
WinID 表示ID号表示唯一的
WinName表示窗口的名称
WinFlag 表示窗口的状态是否显示(1表示true,0表示false)
//======================================================================
然后是asp.net的部分主要的作用是生成客户端显示的窗口的html
前台部分
<%@ Page language="c#" Codebehind="WebForm6.aspx.cs" AutoEventWireup="false" Inherits="demoClass.WebForm6" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>WebForm6</title>
<meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
<meta content="C#" name="CODE_LANGUAGE">
<meta content="JavaScript" name="vs_defaultClientScript">
<meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
<script src="google_drag.js"></script>
<style>.modbox .el {
}
.modbox .csl {
DISPLAY: none
}
.modbox .es {
DISPLAY: none
}
.modbox_e .el {
DISPLAY: none
}
.modbox_e .csl {
}
.modbox .es {
}
.fres {
OVERFLOW: hidden; ; WIDTH: expression(_gel("ffresults").offsetWidth+"px")
}
.panelo {
}
.panelc {
}
.mod {
}
.unmod {
}
FORM {
DISPLAY: inline
}
.c {
CLEAR: both
}
BODY {
FONT-FAMILY: arial,sans-serif
}
TD {
FONT-FAMILY: arial,sans-serif
}
A {
FONT-FAMILY: arial,sans-serif
}
P {
FONT-FAMILY: arial,sans-serif
}
.h {
FONT-FAMILY: arial,sans-serif
}
A:link {
COLOR: #0000cc
}
A:visited {
COLOR: #551a8b
}
A:active {
COLOR: #ff0000
}
.mttl {
PADDING-RIGHT: 5px; PADDING-LEFT: 2px; FONT-WEIGHT: bold; FONT-SIZE: 122%; WIDTH: 90%; BACKGROUND-COLOR: #e5ecf9
}
H2.modtitle {
FONT-WEIGHT: normal; FONT-SIZE: 100%; PADDING-BOTTOM: 0px; MARGIN: 0em; WIDTH: 100%; PADDING-TOP: 0px
}
.modbox {
MARGIN-BOTTOM: 20px; BACKGROUND-COLOR: white
}
.modbox_e {
MARGIN-BOTTOM: 20px; BACKGROUND-COLOR: white
}
#c_1 {
VERTICAL-ALIGN: top; WIDTH: 32%
}
#c_2 {
VERTICAL-ALIGN: top; WIDTH: 32%
}
#c_3 {
VERTICAL-ALIGN: top; WIDTH: 32%
}
.mhdr {
PADDING-RIGHT: 0px; BORDER-TOP: #3366cc 1px solid; PADDING-LEFT: 0px; FONT-SIZE: 82%; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 100%; PADDING-TOP: 0px
}
.medit {
PADDING-RIGHT: 2px; VERTICAL-ALIGN: top; WIDTH: 10%; WHITE-SPACE: nowrap; BACKGROUND-COLOR: #e5ecf9; TEXT-ALIGN: right
}
.medit {
COLOR: #77c
}
.medit A:visited {
COLOR: #77c
}
.medit A:link {
COLOR: #77c
}
.medit A:active {
COLOR: #77c
}
.mc {
FONT-SIZE: 82%; PADDING-BOTTOM: 4px; WIDTH: 100%; PADDING-TOP: 4px
}
</style>
</HEAD>
<body MS_POSITIONING="GridLayout">
<form id="Form1" method="post" runat="server">
<table cellpadding="0" cellspacing="0" border="0" width="100%" height="100%">
<tr>
<td valign="top" width="100%">
<div id="modules">
<table id="t_1" cellspacing="10" border="0" width="98%" align="center" style="TABLE-LAYOUT:fixed">
<tr>
<td id="c_1" >
<asp:Literal id="sideLeft" runat="server"></asp:Literal>
</td>
<td id="c_3" >
<asp:Literal id="sideCenter" runat="server"></asp:Literal>
</td>
<td id="c_2" >
<asp:Literal id="sideRight" runat="server"></asp:Literal>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
<DIV></DIV>
</TD></TR></TABLE>
</form>
<script>
_table=document.getElementById("t_1");
window.onload = _IG_initDrag(_table);
</script>
</body>
</HTML>
//=====================================后台部分
using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
using System.Text;
namespace demoClass
{
/// <summary>
/// WebForm6 的摘要说明。
/// </summary>
public class WebForm6 : System.Web.UI.Page
{
protected System.Web.UI.WebControls.Literal sideLeft;
protected System.Web.UI.WebControls.Literal sideCenter;
protected System.Web.UI.WebControls.Literal sideRight;
private void Page_Load(object sender, System.EventArgs e)
{
//这里我没有读数据库,直接写了一些数据
sideLeft.Text=RenderHtml(1,"ahui4367","<b>ahui4367</b>")+CommonLayer();
sideCenter.Text=RenderHtml(3,"ahui4367111","<b>ahui4367111</b>")+CommonLayer();
sideRight.Text=RenderHtml(2,"ahui4367111","<b>ahui4367111</b>")+CommonLayer();
}
//这里的ID就是WinInfo表 的id
//strTitle WinInfo表窗口的名称
//strContent是
string RenderHtml (int id,string strTitle,string strContent)
{
System.Text.StringBuilder sb=new StringBuilder();
sb.Append("<div id=m_"+id+" class=modbox style=/"position:relative/">/n");//start1
sb.Append("<h2 class=modtitle>/n");
sb.Append("<table class=mhdr cellspacing=0 cellpadding=0 >/n");
sb.Append("<tr>");
sb.Append("<td id=m_"+id+"_h class=mttl>"+strTitle+"</td>/n");
sb.Append("<td id=m_"+id+"_e class=medit></td>/n");
sb.Append("</tr></table>/n");
sb.Append("</h2>/n");
sb.Append("<div>");//start2
sb.Append(strContent);
sb.Append("</div>/n");//end2
sb.Append(" </div>");//end1
return sb.ToString();
}
string CommonLayer()
{
return "<div style='width=1px;height=1px;position:relative;'></div>";
}
#region Web 窗体设计器生成的代码
override protected void OnInit(EventArgs e)
{
//
// CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。
//
InitializeComponent();
base.OnInit(e);
}
/// <summary>
/// 设计器支持所需的方法 - 不要使用代码编辑器修改
/// 此方法的内容。
/// </summary>
private void InitializeComponent()
{
this.Load += new System.EventHandler(this.Page_Load);
}
#endregion
}
}
//========================================================================
google_drag.js部分
// 工具类，使用Util的命名空间，方便管理
var Util = new Object();
// 获取http header里面的UserAgent，浏览器信息
Util.getUserAgent = navigator.userAgent;
// 是否是Gecko核心的Browser，比如Mozila、Firefox
Util.isGecko = Util.getUserAgent.indexOf( " Gecko " ) != - 1 ;
// 是否是Opera
Util.isOpera = Util.getUserAgent.indexOf( " Opera " ) != - 1 ;
// 获取一个element的offset信息，其实就是相对于Body的padding以内的绝对坐标
// 后面一个参数如果是true则获取offsetLeft，false则是offsetTop
// 关于offset、style、client等坐标的定义参考dindin的这个帖子：http://www.jroller.com/page/dindin/?anchor=pro_javascript_12
Util.getOffset = function (el, isLeft) {
var retValue = 0 ;
while (el != null ) {
retValue += el[ " offset " + (isLeft ? " Left " : " Top " )];
el = el.offsetParent;
}
return retValue;
};
// 将一个function（参数中的funcName是这个fuction的名字）绑定到一个element上，并且以这个element的上下文运行，其实是一种继承，这个可以google些文章看看
Util.bindFunction = function (el, fucName) {
return function () {
return el[fucName].apply(el, arguments);
};
};
// 重新计算所有的可以拖拽的element的坐标，对同一个column下面的可拖拽图层重新计算它们的高度而得出新的坐标，防止遮叠
// 计算出来的坐标记录在pagePosLeft和pagePosTop两个属性里面
Util.re_calcOff = function (el) {
for ( var i = 0 ; i < Util.dragArray.length; i ++ ) {
var ele = Util.dragArray[i];
ele.elm.pagePosLeft = Util.getOffset(ele.elm, true );
ele.elm.pagePosTop = Util.getOffset(ele.elm, false );
}
var nextSib = el.elm.nextSibling;
while (nextSib) {
nextSib.pagePosTop -= el.elm.offsetHeight;
nextSib = nextSib.nextSibling;
}
};
// 隐藏Google Ig中间那个table，也就是拖拽的容器，配合show一般就是刷新用，解决一些浏览器的怪癖
Util.hide = function () {
Util.rootElement.style.display = " none " ;
};
// 显示Google Ig中间那个table，解释同上
Util.show = function () {
Util.rootElement.style.display = "" ;
};
// 移动时显示的占位虚线框
ghostElement = null ;
// 获取这个虚线框，通过dom动态生成
getGhostElement = function () {
if ( ! ghostElement) {
ghostElement = document.createElement( " DIV " );
ghostElement.className = " modbox " ;
ghostElement.backgroundColor = "" ;
ghostElement.style.border = " 2px dashed #aaa " ;
ghostElement.innerHTML = " " ;
}
return ghostElement;
};
// 初始化可以拖拽的Element的函数，与拖拽无关的我去掉了
function draggable(el) {
// 公用的开始拖拽的函数
this ._dragStart = start_Drag;
// 公用的正在拖拽的函数
this ._drag = when_Drag;
// 公用的拖拽结束的函数
this ._dragEnd = end_Drag;
// 这个函数主要用来进行拖拽结束后的dom处理
this ._afterDrag = after_Drag;
// 是否正在被拖动，一开始当然没有被拖动
this .isDragging = false ;
// 将这个Element的this指针注册在elm这个变量里面，方便在自己的上下文以外调用自己的函数等，很常用的方法
this .elm = el;
// 触发拖拽的Element，在这里就是这个div上显示标题的那个div
this .header = document.getElementById(el.id + " _h " );
// 对于有iframe的element拖拽不同，这里检测一下并记录
this .hasIFrame = this .elm.getElementsByTagName( " IFRAME " ).length > 0 ;
// 如果找到了header就绑定drag相关的event
if ( this .header) {
// 拖拽时的叉子鼠标指针
this .header.style.cursor = " move " ;
// 将函数绑定到header和element的this上，参照那个函数的说明
Drag.init( this .header, this .elm);
// 下面三个语句将写好的三个函数绑定给这个elemnt的三个函数钩子上，也就实现了element从draggable继承可拖拽的函数
this .elm.onDragStart = Util.bindFunction( this , " _dragStart " );
this .elm.onDrag = Util.bindFunction( this , " _drag " );
this .elm.onDragEnd = Util.bindFunction( this , " _dragEnd " );
}
};
// 下面就是draggable里面用到的那4个function
// 公用的开始拖拽的函数
function start_Drag() {
// 重置坐标，实现拖拽以后自己的位置马上会被填充的效果
Util.re_calcOff( this );
// 记录原先的邻居节点，用来对比是否被移动到新的位置
this .origNextSibling = this .elm.nextSibling;
// 获取移动的时候那个灰色的虚线框
var _ghostElement = getGhostElement();
// 获取正在移动的这个对象的高度
var offH = this .elm.offsetHeight;
if (Util.isGecko) {
// 修正gecko引擎的怪癖吧
offH -= parseInt(_ghostElement.style.borderTopWidth) * 2 ;
}
// 获取正在移动的这个对象的宽度
var offW = this .elm.offsetWidth;
// 获取left和top的坐标
var offLeft = Util.getOffset( this .elm, true );
var offTop = Util.getOffset( this .elm, false );
// 防止闪烁，现隐藏
Util.hide();
// 将自己的宽度记录在style属性里面
this .elm.style.width = offW + " px " ;
// 将那个灰框设定得与正在拖动的对象一样高，比较形象
_ghostElement.style.height = offH + " px " ;
// 把灰框放到这个对象原先的位置上
this .elm.parentNode.insertBefore(_ghostElement, this .elm.nextSibling);
// 由于要拖动必须将被拖动的对象从原先的盒子模型里面抽出来，所以设定position为absolute，这个可以参考一下css布局方面的知识
this .elm.style.position = " absolute " ;
// 设置zIndex，让它处在最前面一层，当然其实zIndex=100是让它很靠前，如果页面里有zIndex>100的，那……
this .elm.style.zIndex = 100 ;
// 由于position=absolute了，所以left和top实现绝对坐标定位，这就是先前计算坐标的作用，不让这个模型乱跑，要从开始拖动的地方开始移动
this .elm.style.left = offLeft + " px " ;
this .elm.style.top = offTop + " px " ;
// 坐标设定完毕，可以显示了，这样就不会闪烁了
Util.show();
// 这里本来有个ig_d.G，没搞明白干什么用的，不过没有也可以用，谁知道麻烦告诉我一声，不好意思
// 还没有开始拖拽，这里做个记号
this .isDragging = false ;
return false ;
};
// 在拖拽时的相应函数，由于绑定到鼠标的move这个event上，所以会传入鼠标的坐标clientX, clientY
function when_Drag(clientX, clientY) {
// 刚开始拖拽的时候将图层变透明，并标记为正在被拖拽
if ( ! this .isDragging) {
this .elm.style.filter = " alpha(opacity=70) " ;
this .elm.style.opacity = 0.7 ;
this .isDragging = true ;
}
// 被拖拽到的新的column（当然也可以是原来那个）
var found = null ;
// 最大的距离，可能是防止溢出或者什么bug
var max_distance = 100000000 ;
// 遍历所有的可拖拽的element，寻找离当前鼠标坐标最近的那个可拖拽元素，以便后面插入
for ( var i = 0 ; i < Util.dragArray.length; i ++ ) {
var ele = Util.dragArray[i];
// 利用勾股定理计算鼠标到遍历到的这个元素的距离
var distance = Math.sqrt(Math.pow(clientX - ele.elm.pagePosLeft, 2 ) + Math.pow(clientY - ele.elm.pagePosTop, 2 ));
// 自己已经浮动了，所以不计算自己的
if (ele == this ) {
continue ;
}
// 如果计算失败继续循环
if (isNaN(distance)) {
continue ;
}
// 如果更小，记录下这个距离，并将它作为found
if (distance < max_distance) {
max_distance = distance;
found = ele;
}
}
// 准备让灰框落脚
var _ghostElement = getGhostElement();
// 如果找到了另外的落脚点
if (found != null && _ghostElement.nextSibling != found.elm) {
// 找到落脚点就先把灰框插进去，这就是我们看到的那个灰框停靠的特效，有点像吸附的感觉，哈哈
found.elm.parentNode.insertBefore(_ghostElement, found.elm);
if (Util.isOpera) {
// Opera的现实问题，要隐藏/显示后才能刷新出变化
document.body.style.display = " none " ;
document.body.style.display = "" ;
}
}
};
// 拖拽完毕
function end_Drag() {
// 拖拽完毕后执行后面的钩子，执行after_Drag()，如果布局发生了变动了就记录到远程服务器，保存你拖拽后新的布局顺序
if ( this ._afterDrag()) {
// remote call to save the change
}
return true ;
};
// 拖拽后的执行钩子
function after_Drag() {
var returnValue = false ;
// 防止闪烁
Util.hide();
// 把拖拽时的position=absolute和相关的那些style都消除
this .elm.style.position = "" ;
this .elm.style.width = "" ;
this .elm.style.zIndex = "" ;
this .elm.style.filter = "" ;
this .elm.style.opacity = "" ;
// 获取灰框
var ele = getGhostElement();
// 如果现在的邻居不是原来的邻居了
if (ele.nextSibling != this .origNextSibling) {
// 把被拖拽的这个节点插到灰框的前面
ele.parentNode.insertBefore( this .elm, ele.nextSibling);
// 标明被拖拽了新的地方
returnValue = true ;
}
// 移除灰框，这是这个灰框的生命周期应该就结束了
ele.parentNode.removeChild(ele);
// 修改完毕，显示
Util.show();
if (Util.isOpera) {
// Opera的现实问题，要隐藏/显示后才能刷新出变化
document.body.style.display = " none " ;
document.body.style.display = "" ;
}
return returnValue;
};
// 可拖拽Element的原形，用来将event绑定到各个钩子，这部分市比较通用的，netvibes也是基本完全相同的实现
// 这部分推荐看dindin的这个，也会帮助理解，http://www.jroller.com/page/dindin/?anchor=pro_javascript_12
var Drag = {
// 对这个element的引用，一次只能拖拽一个Element
obj: null ,
// element是被拖拽的对象的引用，elementHeader就是鼠标可以拖拽的区域
init: function (elementHeader, element) {
// 将start绑定到onmousedown事件，按下鼠标触发start
elementHeader.onmousedown = Drag.start;
// 将element存到header的obj里面，方便header拖拽的时候引用
elementHeader.obj = element;
// 初始化绝对的坐标，因为不是position=absolute所以不会起什么作用，但是防止后面onDrag的时候parse出错了
if (isNaN(parseInt(element.style.left))) {
element.style.left = " 0px " ;
}
if (isNaN(parseInt(element.style.top))) {
element.style.top = " 0px " ;
}
// 挂上空Function，初始化这几个成员，在Drag.init被调用后才帮定到实际的函数，可以参照draggable里面的内容
element.onDragStart = new Function();
element.onDragEnd = new Function();
element.onDrag = new Function();
},
// 开始拖拽的绑定，绑定到鼠标的移动的event上
start: function (event) {
var element = Drag.obj = this .obj;
// 解决不同浏览器的event模型不同的问题
event = Drag.fixE(event);
// 看看是不是左键点击
if (event.which != 1 ) {
// 除了左键都不起作用
return true ;
}
// 参照这个函数的解释，挂上开始拖拽的钩子
element.onDragStart();
// 记录鼠标坐标
element.lastMouseX = event.clientX;
element.lastMouseY = event.clientY;
// 将Global的event绑定到被拖动的element上面来
document.onmouseup = Drag.end;
document.onmousemove = Drag.drag;
return false ;
},
// Element正在被拖动的函数
drag: function (event) {
// 解决不同浏览器的event模型不同的问题
event = Drag.fixE(event);
// 看看是不是左键点击
if (event.which == 0 ) {
// 除了左键都不起作用
return Drag.end();
}
// 正在被拖动的Element
var element = Drag.obj;
// 鼠标坐标
var _clientX = event.clientY;
var _clientY = event.clientX;
// 如果鼠标没动就什么都不作
if (element.lastMouseX == _clientY && element.lastMouseY == _clientX) {
return false ;
}
// 刚才Element的坐标
var _lastX = parseInt(element.style.top);
var _lastY = parseInt(element.style.left);
// 新的坐标
var newX, newY;
// 计算新的坐标：原先的坐标+鼠标移动的值差
newX = _lastY + _clientY - element.lastMouseX;
newY = _lastX + _clientX - element.lastMouseY;
// 修改element的显示坐标
element.style.left = newX + " px " ;
element.style.top = newY + " px " ;
// 记录element现在的坐标供下一次移动使用
element.lastMouseX = _clientY;
element.lastMouseY = _clientX;
// 参照这个函数的解释，挂接上Drag时的钩子
element.onDrag(newX, newY);
return false ;
},
// Element正在被释放的函数，停止拖拽
end: function (event) {
// 解决不同浏览器的event模型不同的问题
event = Drag.fixE(event);
// 解除对Global的event的绑定
document.onmousemove = null ;
document.onmouseup = null ;
// 先记录下onDragEnd的钩子，好移除obj
var _onDragEndFuc = Drag.obj.onDragEnd();
// 拖拽完毕，obj清空
Drag.obj = null ;
return _onDragEndFuc;
},
// 解决不同浏览器的event模型不同的问题
fixE: function (ig_) {
if ( typeof ig_ == " undefined " ) {
ig_ = window.event;
}
if ( typeof ig_.layerX == " undefined " ) {
ig_.layerX = ig_.offsetX;
}
if ( typeof ig_.layerY == " undefined " ) {
ig_.layerY = ig_.offsetY;
}
if ( typeof ig_.which == " undefined " ) {
ig_.which = ig_.button;
}
return ig_;
}
};
// 下面是初始化的函数了，看看上面这些东西怎么被调用
var _IG_initDrag = function (el) {
// column那个容器，在google里面就是那个table布局的tbody，netvibes用的<div>
Util.rootElement = el;
// 这个tbody的行
Util._rows = Util.rootElement.tBodies[ 0 ].rows[ 0 ];
// 列，google是3列，其实也可以更多
Util.column = Util._rows.cells;
// 用来存取可拖拽的对象
Util.dragArray = new Array();
var counter = 0 ;
for ( var i = 0 ; i < Util.column.length; i ++ ) {
// 搜索所有的column
var ele = Util.column[i];
for ( var j = 0 ; j < ele.childNodes.length; j ++ ) {
// 搜索每一column里面的所有element
var ele1 = ele.childNodes[j];
// 如果是div就把它初始化为一个draggable对象
if (ele1.tagName == " DIV " ) {
Util.dragArray[counter] = new draggable(ele1);
counter ++ ;
}
}
}
};
//还有怎么获取ＳideLeft Ｓidecenter ＳideRight容器的窗口的Ｉd很简单的．
如：
var c=document.getElementById("c_2");
for(var p in c.childNodes)
{
alert(c.childNodes[p].id);
}