该效果在firefox和IE中测试通过.拖动然后就布局自动保存到数据库里了.
2007-01-09 17:38
721 查看
asp.net+javascript+css(模仿google的拖拽的个性网页布局)(操作数据库篇2)
该效果在firefox和IE中测试通过.拖动然后就布局自动保存到数据库里了.
SaveSide .aspx.cs
public class SaveSide : System.Web.UI.Page
{
ahui4367.SideSql tempSideSql=new SideSql();
private void Page_Load(object sender, System.EventArgs e)
{
if(Request.QueryString["action"]=="changeSide")
{
string strLeft=Request.QueryString["strleft"];
string strCenter=Request.QueryString["strCenter"];
string strRight=Request.QueryString["strRight"];
tempSideSql.SaveSide(strLeft,strCenter,strRight,1);
}
}
#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
}
我把昨天的发表的代码又修改了.具体的看下面的/还使用了prototype1.4的框架了,
<%@ 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='prototype-1.4.0.js'></script>
<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%">
<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_2">
<asp:Literal id="sideCenter" runat="server"></asp:Literal>
</td>
<td id="c_3">
<asp:Literal id="sideRight" runat="server"></asp:Literal>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
<DIV></DIV>
</TD></TR></TABLE>
</form>
<script>
function addEvent(obj, evenTypeName, fn)...{
if (obj.addEventListener)...{
obj.addEventListener(evenTypeName, fn, true);
return true;
} else if (obj.attachEvent)...{
return obj.attachEvent("on"+evenTypeName, fn);
} else ...{
return false;
}
}
_table=document.getElementById("t_1");
addEvent(window,"load",_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;
using ahui4367;
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;
Side TempSide=new Side();
SideSql TempSideSql=new SideSql();
WinInfo TempWinInfo=new WinInfo();
WinInfoSql TempWinInfoSql=new WinInfoSql();
char[] dot=...{','};
private void Page_Load(object sender, System.EventArgs e)
...{
TempSide=TempSideSql.InitSide(1);
if(TempSide.SideLeft!="")
...{
string[] StrLeft=TempSide.SideLeft.Trim().Split(dot);
for(int i=0;i<StrLeft.Length;i++)
...{
TempWinInfo=TempWinInfoSql.GetWinInfo(Convert.ToInt32(StrLeft[i]));
sideLeft.Text=sideLeft.Text+RenderHtml(TempWinInfo.WinID,TempWinInfo.WinName,"这是我的窗口内容");
}
}
if(TempSide.SideCenter!="")
...{
string[] StrCenter=TempSide.SideCenter.Trim().Split(dot);
for(int i=0;i<StrCenter.Length;i++)
...{
TempWinInfo=TempWinInfoSql.GetWinInfo(Convert.ToInt32(StrCenter[i]));
sideCenter.Text=sideCenter.Text+RenderHtml(TempWinInfo.WinID,TempWinInfo.WinName,"这是我的窗口内容");
}
}
if(TempSide.SideRight!="")
...{
string[] StrRight=TempSide.SideRight.Trim().Split(dot);
for(int i=0;i<StrRight.Length;i++)
...{
TempWinInfo=TempWinInfoSql.GetWinInfo(Convert.ToInt32(StrRight[i]));
sideRight.Text=sideRight.Text+RenderHtml(TempWinInfo.WinID,TempWinInfo.WinName,"这是我的窗口内容");
}
}
sideLeft.Text=sideLeft.Text+CommonLayer();
sideCenter.Text=sideCenter.Text+CommonLayer();
sideRight.Text=sideRight.Text+CommonLayer();
}
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">");//start1
sb.Append("<h2 class=modtitle>");
sb.Append("<table class=mhdr cellspacing=0 cellpadding=0 >");
sb.Append("<tr>");
sb.Append("<td id=m_"+id+"_h class=mttl>"+strTitle+"</td>");
sb.Append("<td id=m_"+id+"_e class=medit></td>");
sb.Append("</tr></table>");
sb.Append("</h2>");
sb.Append("<div>");//start2
sb.Append(strContent);
sb.Append("</div>");//end2
sb.Append(" </div>");//end1
return sb.ToString();
}
string CommonLayer()
...{
return "<div style='width=1px;height=1px;position:relative;'></div>";
}
Web 窗体设计器生成的代码#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
}
}
主要保存到数据库的代码在这里
var leftContainer=$("c_1");
var centerContainer=$("c_2")
var rightContainer=$("c_3");
var strLeft=strCenter=strRight="";
Element.cleanWhitespace(leftContainer);
Element.cleanWhitespace(centerContainer);
Element.cleanWhitespace(rightContainer);
for(var i=0;i<leftContainer.childNodes.length-1;i++)
{
strLeft=strLeft+leftContainer.childNodes[i].id.replace("m_","")+",";
}
for(var i=0;i<centerContainer.childNodes.length-1;i++)
{
strCenter=strCenter+centerContainer.childNodes[i].id.replace("m_","")+",";
}
for(var i=0;i<rightContainer.childNodes.length-1;i++)
{
strRight=strRight+rightContainer.childNodes[i].id.replace("m_","")+",";
}
var options={
parameters:"strLeft="+strLeft.substr(0,(strLeft.length-1))+"&strCenter="+strCenter.substr(0,(strCenter.length-1))+"&strRight="+strRight.substr(0,(strRight.length-1)),
method:"get"
}
new Ajax.Request("SaveSide.aspx?action=changeSide&s"+Math.random(),options);
只要把这段代码加入google_drag.js文件中,找到如下的地方.然后Paste
if (this._afterDrag()) {
//这里就是放代码的地方
}
好了就这样了.如果不懂的可以和我联系,代码也可以的.留个Email我发给你.
------------------------------------------------------------------------------
个性网页布局的用到了2张表.具体的操作表的代码如下:(有4个文件)
Side.cs
public class Side
{
int _SideID;
string _SideLeft;
string _SideCenter;
string _SideRight;
public Side()
{
}
public int SideID
{
get{return this._SideID;}
set{this._SideID=value;}
}
public string SideLeft
{
get{return this._SideLeft;}
set{this._SideLeft=value;}
}
public string SideCenter
{
get{return this._SideCenter;}
set{this._SideCenter=value;}
}
public string SideRight
{
get{return this._SideRight;}
set{this._SideRight=value;}
}
}
}
WinInfo.cs
public class WinInfo
{
int _WinID;
string _WinName;
int _WinFlag;
public WinInfo()
{
}
public int WinID
{
get{return this._WinID;}
set{this._WinID=value;}
}
public string WinName
{
get{return this._WinName;}
set{this._WinName=value;}
}
public int WinFlag
{
get{return this._WinFlag;}
set{this._WinFlag=value;}
}
}
SideSql.cs
public class SideSql
{
public string conn=ConfigurationSettings.AppSettings["connstr"];
public SideSql()
{
}
/// <summary>
/// 保存窗口的布局到数据库
/// </summary>
/// <param name="sideLeft">左侧布局容器的窗口的ID字符串,中间用逗号隔开</param>
/// <param name="sideCenter">中间布局容器的窗口的ID字符串,中间用逗号隔开</param>
/// <param name="sideRigth">右侧布局容器的窗口的ID字符串,中间用逗号隔开</param>
/// <param name="sideID"></param>
public void SaveSide(string sideLeft,string sideCenter,string sideRigth,int sideID)
{
using(SqlConnection con = new SqlConnection(conn))
{
con.Open();
using(SqlTransaction trans=con.BeginTransaction())
{
try
{
SqlHelper.ExecuteNonQuery(trans,System.Data.CommandType.Text,"update Side set SideLeft='"+sideLeft+"',SideCenter='"+sideCenter+"',SideRight='"+sideRigth+"' where SideID="+sideID);
trans.Commit();
}
catch
{
trans.Rollback();
}
}
}
}
public Side InitSide(int sideID)//初始化窗口用的
{
using(SqlDataReader dr=SqlHelper.ExecuteReader(conn,System.Data.CommandType.Text,"select * from side where SideID=1"))
{
if(dr.Read())
{
Side TempSide=new Side();
TempSide.SideLeft=dr["SideLeft"].ToString();
TempSide.SideCenter=dr["SideCenter"].ToString();
TempSide.SideRight=dr["SideRight"].ToString();
return TempSide;
}
else
{
return null;
}
}
}
}
WinInfoSql.cs
public class WinInfoSql
{
public static string conn=ConfigurationSettings.AppSettings["connstr"];
WinInfo TempWinInfo=new WinInfo();
public WinInfoSql()
{
}
public WinInfo GetWinInfo(int winID)//获取窗口信息
{
using(SqlDataReader dr=SqlHelper.ExecuteReader(conn,System.Data.CommandType.Text,"select * from WinInfo where WinFlag=1 and WinID="+winID))
{
if(dr.Read())
{
TempWinInfo.WinName=dr["WinName"].ToString();
TempWinInfo.WinID=Convert.ToInt32(dr["WinID"]);
return TempWinInfo;
}
else
{
return null;
}
}
}
}
请到这里下载
http://download.csdn.net/detail/cxzhq2002/4146511
该效果在firefox和IE中测试通过.拖动然后就布局自动保存到数据库里了.
SaveSide .aspx.cs
public class SaveSide : System.Web.UI.Page
{
ahui4367.SideSql tempSideSql=new SideSql();
private void Page_Load(object sender, System.EventArgs e)
{
if(Request.QueryString["action"]=="changeSide")
{
string strLeft=Request.QueryString["strleft"];
string strCenter=Request.QueryString["strCenter"];
string strRight=Request.QueryString["strRight"];
tempSideSql.SaveSide(strLeft,strCenter,strRight,1);
}
}
#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
}
我把昨天的发表的代码又修改了.具体的看下面的/还使用了prototype1.4的框架了,
<%@ 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='prototype-1.4.0.js'></script>
<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%">
<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_2">
<asp:Literal id="sideCenter" runat="server"></asp:Literal>
</td>
<td id="c_3">
<asp:Literal id="sideRight" runat="server"></asp:Literal>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
<DIV></DIV>
</TD></TR></TABLE>
</form>
<script>
function addEvent(obj, evenTypeName, fn)...{
if (obj.addEventListener)...{
obj.addEventListener(evenTypeName, fn, true);
return true;
} else if (obj.attachEvent)...{
return obj.attachEvent("on"+evenTypeName, fn);
} else ...{
return false;
}
}
_table=document.getElementById("t_1");
addEvent(window,"load",_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;
using ahui4367;
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;
Side TempSide=new Side();
SideSql TempSideSql=new SideSql();
WinInfo TempWinInfo=new WinInfo();
WinInfoSql TempWinInfoSql=new WinInfoSql();
char[] dot=...{','};
private void Page_Load(object sender, System.EventArgs e)
...{
TempSide=TempSideSql.InitSide(1);
if(TempSide.SideLeft!="")
...{
string[] StrLeft=TempSide.SideLeft.Trim().Split(dot);
for(int i=0;i<StrLeft.Length;i++)
...{
TempWinInfo=TempWinInfoSql.GetWinInfo(Convert.ToInt32(StrLeft[i]));
sideLeft.Text=sideLeft.Text+RenderHtml(TempWinInfo.WinID,TempWinInfo.WinName,"这是我的窗口内容");
}
}
if(TempSide.SideCenter!="")
...{
string[] StrCenter=TempSide.SideCenter.Trim().Split(dot);
for(int i=0;i<StrCenter.Length;i++)
...{
TempWinInfo=TempWinInfoSql.GetWinInfo(Convert.ToInt32(StrCenter[i]));
sideCenter.Text=sideCenter.Text+RenderHtml(TempWinInfo.WinID,TempWinInfo.WinName,"这是我的窗口内容");
}
}
if(TempSide.SideRight!="")
...{
string[] StrRight=TempSide.SideRight.Trim().Split(dot);
for(int i=0;i<StrRight.Length;i++)
...{
TempWinInfo=TempWinInfoSql.GetWinInfo(Convert.ToInt32(StrRight[i]));
sideRight.Text=sideRight.Text+RenderHtml(TempWinInfo.WinID,TempWinInfo.WinName,"这是我的窗口内容");
}
}
sideLeft.Text=sideLeft.Text+CommonLayer();
sideCenter.Text=sideCenter.Text+CommonLayer();
sideRight.Text=sideRight.Text+CommonLayer();
}
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">");//start1
sb.Append("<h2 class=modtitle>");
sb.Append("<table class=mhdr cellspacing=0 cellpadding=0 >");
sb.Append("<tr>");
sb.Append("<td id=m_"+id+"_h class=mttl>"+strTitle+"</td>");
sb.Append("<td id=m_"+id+"_e class=medit></td>");
sb.Append("</tr></table>");
sb.Append("</h2>");
sb.Append("<div>");//start2
sb.Append(strContent);
sb.Append("</div>");//end2
sb.Append(" </div>");//end1
return sb.ToString();
}
string CommonLayer()
...{
return "<div style='width=1px;height=1px;position:relative;'></div>";
}
Web 窗体设计器生成的代码#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
}
}
主要保存到数据库的代码在这里
var leftContainer=$("c_1");
var centerContainer=$("c_2")
var rightContainer=$("c_3");
var strLeft=strCenter=strRight="";
Element.cleanWhitespace(leftContainer);
Element.cleanWhitespace(centerContainer);
Element.cleanWhitespace(rightContainer);
for(var i=0;i<leftContainer.childNodes.length-1;i++)
{
strLeft=strLeft+leftContainer.childNodes[i].id.replace("m_","")+",";
}
for(var i=0;i<centerContainer.childNodes.length-1;i++)
{
strCenter=strCenter+centerContainer.childNodes[i].id.replace("m_","")+",";
}
for(var i=0;i<rightContainer.childNodes.length-1;i++)
{
strRight=strRight+rightContainer.childNodes[i].id.replace("m_","")+",";
}
var options={
parameters:"strLeft="+strLeft.substr(0,(strLeft.length-1))+"&strCenter="+strCenter.substr(0,(strCenter.length-1))+"&strRight="+strRight.substr(0,(strRight.length-1)),
method:"get"
}
new Ajax.Request("SaveSide.aspx?action=changeSide&s"+Math.random(),options);
只要把这段代码加入google_drag.js文件中,找到如下的地方.然后Paste
if (this._afterDrag()) {
//这里就是放代码的地方
}
好了就这样了.如果不懂的可以和我联系,代码也可以的.留个Email我发给你.
------------------------------------------------------------------------------
个性网页布局的用到了2张表.具体的操作表的代码如下:(有4个文件)
Side.cs
public class Side
{
int _SideID;
string _SideLeft;
string _SideCenter;
string _SideRight;
public Side()
{
}
public int SideID
{
get{return this._SideID;}
set{this._SideID=value;}
}
public string SideLeft
{
get{return this._SideLeft;}
set{this._SideLeft=value;}
}
public string SideCenter
{
get{return this._SideCenter;}
set{this._SideCenter=value;}
}
public string SideRight
{
get{return this._SideRight;}
set{this._SideRight=value;}
}
}
}
WinInfo.cs
public class WinInfo
{
int _WinID;
string _WinName;
int _WinFlag;
public WinInfo()
{
}
public int WinID
{
get{return this._WinID;}
set{this._WinID=value;}
}
public string WinName
{
get{return this._WinName;}
set{this._WinName=value;}
}
public int WinFlag
{
get{return this._WinFlag;}
set{this._WinFlag=value;}
}
}
SideSql.cs
public class SideSql
{
public string conn=ConfigurationSettings.AppSettings["connstr"];
public SideSql()
{
}
/// <summary>
/// 保存窗口的布局到数据库
/// </summary>
/// <param name="sideLeft">左侧布局容器的窗口的ID字符串,中间用逗号隔开</param>
/// <param name="sideCenter">中间布局容器的窗口的ID字符串,中间用逗号隔开</param>
/// <param name="sideRigth">右侧布局容器的窗口的ID字符串,中间用逗号隔开</param>
/// <param name="sideID"></param>
public void SaveSide(string sideLeft,string sideCenter,string sideRigth,int sideID)
{
using(SqlConnection con = new SqlConnection(conn))
{
con.Open();
using(SqlTransaction trans=con.BeginTransaction())
{
try
{
SqlHelper.ExecuteNonQuery(trans,System.Data.CommandType.Text,"update Side set SideLeft='"+sideLeft+"',SideCenter='"+sideCenter+"',SideRight='"+sideRigth+"' where SideID="+sideID);
trans.Commit();
}
catch
{
trans.Rollback();
}
}
}
}
public Side InitSide(int sideID)//初始化窗口用的
{
using(SqlDataReader dr=SqlHelper.ExecuteReader(conn,System.Data.CommandType.Text,"select * from side where SideID=1"))
{
if(dr.Read())
{
Side TempSide=new Side();
TempSide.SideLeft=dr["SideLeft"].ToString();
TempSide.SideCenter=dr["SideCenter"].ToString();
TempSide.SideRight=dr["SideRight"].ToString();
return TempSide;
}
else
{
return null;
}
}
}
}
WinInfoSql.cs
public class WinInfoSql
{
public static string conn=ConfigurationSettings.AppSettings["connstr"];
WinInfo TempWinInfo=new WinInfo();
public WinInfoSql()
{
}
public WinInfo GetWinInfo(int winID)//获取窗口信息
{
using(SqlDataReader dr=SqlHelper.ExecuteReader(conn,System.Data.CommandType.Text,"select * from WinInfo where WinFlag=1 and WinID="+winID))
{
if(dr.Read())
{
TempWinInfo.WinName=dr["WinName"].ToString();
TempWinInfo.WinID=Convert.ToInt32(dr["WinID"]);
return TempWinInfo;
}
else
{
return null;
}
}
}
}
请到这里下载
http://download.csdn.net/detail/cxzhq2002/4146511
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- iframe高度自动调整(通过IE,firefox,opera测试)
- javascript js 拖动效果 兼 ie 6,7,8 firefox Chrome（原创，想要尽管拿去用。技术支持：QQ3084532）
- CSS expression控制图片自动缩放效果代码[兼容 IE,Firefox]
- 源码编译LAMP架构，phpMyadmin管理数据库，增加xcache加速功能，通过ab测试效果。
- 监控复制事件,已经在IE,firefox,maxton测试通过
- 首尾相连的跑马灯效果（在IE Firefox Opera Safari中均已测试）
- 【原】TreeView+Checkbox级联操作（IE/FireFox测试通过）
- js之完全兼容ie与firefox的拖动层代码[测试好用]
- Nov 01 jQuery实现拖动布局并将排序结果保存到数据库
- 揭秘：windows把IE，Firefox，Chrome ,Gtalk，Outlook ，MSN等自动保存的密码都放在哪里？？
- 【原】TreeView+Checkbox级联操作（IE/FireFox测试通过）
- 禁止浏览器后退的一种实现方法，在IE, Firefox, Safari, Chrom 和 Opera上测试通过
- 前台通过js 写个ajax请求把数据传给后台，然后后台接收到这个数据， 再保存到数据库。。
- jQuery拖动布局其结果保存到数据库
- javascript js 拖动效果 兼 ie 6,7,8 firefox Chrome（原创，想要尽管拿去用。技术支持：QQ3084532）
- 使用 JavaScript 实现 XMLHttpRequest,在IE,FireFox 上测试通过
- jQuery实现拖动布局并将排序结果保存到数据库
- 很简单的javascript菜单效果，在ie6, firefox下测试通过，整理了下代码，贴出来。
- flash上加链接a标签--IE,FireFox测试通过