Y.A.R.D

• 下载源文件 - 17.5 Kb

引言

这是一个控件，可以帮助您创建用户可自定义的页面。该控件具有与 My MSN 拖放类似的功能。

背景

我看到很多人在询问类似 My MSN 的拖放功能。有些人还发帖说 Microsoft 正在使用 .armx 扩展名。我不知道 Microsoft 在做什么。但在这里，我重写了 System.Web.UI.WebControls.Panel 类。

此控件非常易于使用。该控件公开了一些 public 属性来设置拖放功能。

使用代码

我只是重写了 System.Web.UI.WebControls.Panel 类。因此，用户可以使用 Panel 类公开的所有属性和方法。该控件具有三个 public 属性

• Draggable - 指定 Panel 是否应可拖动。
• PanelX - 获取 Panel 的当前 X 坐标。
• PanelY - 获取 Panel 的当前 Y 坐标。

<%@ Register TagPrefix="cc1" Namespace="Drag" Assembly="Panel" %> 
<cc1:NewPanel Draggable=true id="NewPanel1" style="position:absolute;  
    width:155px; height:115px; z-index:1;" runat="server"
        cssClass="drag" align=center>
</cc1:NewPanel >

上面的示例非常简单。为了获得类似 My MSN 的外观，我在 Panel 中添加了一个 <table> 来获取外部结构，并在其中添加另一个表来添加表格中的内容。

如果不这样做，用户可以通过点击 Panel 中的任何位置来拖动 Panel。这可以通过 CS 文件中的以下行进行更改。

strRender.Append("if (event.srcElement.parentElement" + 
    ".parentElement.parentElement.parentElement.tagName==\"DIV\"){");

第一个 parentElement 选择 <TD>，第二个 parentElement 选择 <TR>，第三个 parentElement 选择 <TABLE>，第四个 parentElement 选择 Panel 渲染的 <DIV>。您还可以更改用于拖动 Panel 的 <TD> 的 modhead 类。

<%@ Register TagPrefix="cc1" Namespace="Drag" Assembly="Panel" %> 
<cc1:NewPanel Draggable=true id="NewPanel1" 
   style="position:absolute;  width:155px; height:115px; z-index:1;"
        runat="server"  cssClass="drag" align=center>
 <table cellspacing=0 cellpadding=0 border=0 width=100% height=100%>
 <tr class="ss" height=22>
 <td class="mod_tlc" width=6> </td><td class="modhead"  
   width=100%><asp:Label text="My Inbox" 
     cssClass="tan-bold"  runat=server/></td><td class="mod_trc" 
        width=6> </td>
 </tr>   
 <tr>
 <td colspan=3>
 <table cellspacing=0 cellpadding=0 width=100% height=100%   
   class="tables"><tr><td>Your content goes here</td></tr>
 </table>
 </td>
 </tr>
 </table>
</cc1:NewPanel >

为了记住每个 Panel 的位置，一旦用户将 Panel 从一个位置移动到另一个位置，就必须将 X 和 Y 坐标保存在数据库中。

我在 web.Config 文件中设置了 ConnectionString。连接在构造函数中创建和打开。在 mouse-up 事件中，我使用 PanelId 和 UserId 更新了数据库中的 X 和 Y 位置。

表结构如下

• UserID Varchar(50)
• PanelID Varchar(50)
• X Int
• Y Int

只能在 CreateChildControls() 中设置 Panel 的 X 和 Y 坐标。

this.Style.Add("Top",myReader["y"].ToString());
this.Style.Add("Left",myReader["x"].ToString());

我附加了 Style.css，这是我从 My MSN 网站获取的。您可以像平常一样将任何内容添加到 aspx 页面以及 codebehind 页面中的此 Panel 中，并使其在网页上可拖动。

我已将 Draggable 属性硬编码为 true，因为默认情况下，每当页面加载时，我都会为所有 Panel 提供 MY MSN 的可拖动功能。

public bool Draggable
 {
  get
  {
       return _draggable;
  }
  set
  {
       _draggable = true;
  }
 }

使用控件的步骤

• 将 ZIP 文件的内容提取到虚拟目录。
• 将 DLL 复制到 bin 目录。
• 创建 "TEST" 表，其结构如上所述。
• 更改 web.Config 文件中的 ConnectionString。
• 使用任何用户名和密码登录（两者应相同，例如：USER=test PASSWORD=test）
• 将 Panel 移动到页面中的任何位置。
• 注销并使用相同的用户名和密码登录，以查看自定义设置。

用户还可以在表中包含 PageId，并在整个项目中统一使用该控件。