该效果在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
>
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
.modbox .el
...
{ }
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
.modbox .csl
...
{ DISPLAY: none }
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
.modbox .es
...
{ DISPLAY: none }
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
.modbox_e .el
...
{ DISPLAY: none }
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
.modbox_e .csl
...
{ }
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
.modbox .es
...
{ }
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
.fres
...
{ OVERFLOW: hidden; ; WIDTH: expression(_gel("ffresults").offsetWidth+"px") }
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
.panelo
...
{ }
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
.panelc
...
{ }
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
.mod
...
{ }
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
.unmod
...
{ }
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
FORM
...
{ DISPLAY: inline }
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
.c
...
{ CLEAR: both }
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
BODY
...
{ FONT-FAMILY: arial,sans-serif }
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
TD
...
{ FONT-FAMILY: arial,sans-serif }
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
A
...
{ FONT-FAMILY: arial,sans-serif }
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
P
...
{ FONT-FAMILY: arial,sans-serif }
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
.h
...
{ FONT-FAMILY: arial,sans-serif }
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
A:link
...
{ COLOR: #0000cc }
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
A:visited
...
{ COLOR: #551a8b }
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
A:active
...
{ COLOR: #ff0000 }
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
.mttl
...
{ PADDING-RIGHT: 5px; PADDING-LEFT: 2px; FONT-WEIGHT: bold; FONT-SIZE: 122%; WIDTH: 90%; BACKGROUND-COLOR: #e5ecf9 }
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
H2.modtitle
...
{ FONT-WEIGHT: normal; FONT-SIZE: 100%; PADDING-BOTTOM: 0px; MARGIN: 0em; WIDTH: 100%; PADDING-TOP: 0px }
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
.modbox
...
{ MARGIN-BOTTOM: 20px; BACKGROUND-COLOR: white }
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
.modbox_e
...
{ MARGIN-BOTTOM: 20px; BACKGROUND-COLOR: white }
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
#c_1
...
{ VERTICAL-ALIGN: top; WIDTH: 32% }
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
#c_2
...
{ VERTICAL-ALIGN: top; WIDTH: 32% }
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
#c_3
...
{ VERTICAL-ALIGN: top; WIDTH: 32% }
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
.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 }
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
.medit
...
{ PADDING-RIGHT: 2px; VERTICAL-ALIGN: top; WIDTH: 10%; WHITE-SPACE: nowrap; BACKGROUND-COLOR: #e5ecf9; TEXT-ALIGN: right }
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
.medit
...
{ COLOR: #77c }
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
.medit A:visited
...
{ COLOR: #77c }
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
.medit A:link
...
{ COLOR: #77c }
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
.medit A:active
...
{ COLOR: #77c }
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
.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
>
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
function addEvent(obj, evenTypeName, fn)
...
{
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
if (obj.addEventListener)...{
obj.addEventListener(evenTypeName, fn, true);
return true;
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
} else if (obj.attachEvent)...{
return obj.attachEvent("on"+evenTypeName, fn);
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
} else ...{
return false;
}
}
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
_table
=
document.getElementById(
"
t_1
"
);
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
addEvent(window,
"
load
"
,_IG_initDrag(_table));
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
</
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
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
...
{
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
/**//// <summary>
/// WebForm6 的摘要说明。
/// </summary>
public class WebForm6 : System.Web.UI.Page
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
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();
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
char[] dot=...{','};
private void Page_Load(object sender, System.EventArgs e)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
TempSide=TempSideSql.InitSide(1);
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
if(TempSide.SideLeft!="")
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
string[] StrLeft=TempSide.SideLeft.Trim().Split(dot);
for(int i=0;i<StrLeft.Length;i++)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
TempWinInfo=TempWinInfoSql.GetWinInfo(Convert.ToInt32(StrLeft[i]));
sideLeft.Text=sideLeft.Text+RenderHtml(TempWinInfo.WinID,TempWinInfo.WinName,"这是我的窗口内容");
}
}
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
if(TempSide.SideCenter!="")
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
string[] StrCenter=TempSide.SideCenter.Trim().Split(dot);
for(int i=0;i<StrCenter.Length;i++)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
TempWinInfo=TempWinInfoSql.GetWinInfo(Convert.ToInt32(StrCenter[i]));
sideCenter.Text=sideCenter.Text+RenderHtml(TempWinInfo.WinID,TempWinInfo.WinName,"这是我的窗口内容");
}
}
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
if(TempSide.SideRight!="")
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
string[] StrRight=TempSide.SideRight.Trim().Split(dot);
for(int i=0;i<StrRight.Length;i++)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
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();
}
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
string RenderHtml (int id,string strTitle,string strContent)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
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()
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
return "<div style='width=1px;height=1px;position:relative;'></div>";
}
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/7ff8d92cded7e0ce15e7ca1acc870052.gif)
Web 窗体设计器生成的代码#region Web 窗体设计器生成的代码
override protected void OnInit(EventArgs e)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
//
// CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。
//
InitializeComponent();
base.OnInit(e);
}
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
/**//// <summary>
/// 设计器支持所需的方法 - 不要使用代码编辑器修改
/// 此方法的内容。
/// </summary>
private void InitializeComponent()
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
this.Load += new System.EventHandler(this.Page_Load);
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
}
#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;
}
}
}
}