该效果在firefox和IE中测试通过.拖动然后就布局自动保存到数据库里了.

该效果在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 }
... { FONT-FAMILY: arial,sans-serif }
... { 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
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 15
    评论
评论 15
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值