利用Atlas库为Web页面加入鼠标拖放功能(下)

文章作者：
责任编辑：rosan　录入时间：2006-12-1 22:57:06 来源：
频道声明：本频道的文章除部分特别声明禁止转载的专稿外，可以自由转载.但请务必注明出出处和原始作者文章版权归本频道与文章作者所有.对于被频道转载文章的个人和网站,我们表示深深的谢意.

百特科技[http://www.PCbyte.cn]专业的空间、主机提供商，域名注册绝对优惠！

　　五、添加更多的面板

　　到目前为止，你仅看到了一个面板控件。现在，我将再添加一个面板控件来显示当前的日本时间。

　　首先，让我们把一个新的包含另一个面板控件(Panel2)的＜atlas:UpdatePanel＞控件(UpdatePanel2)添加到页面上(现在，时钟显示日本时间)。

＜atlas:UpdatePanel ID="UpdatePanel1" runat="server"＞
＜ContentTemplate＞
...
...
＜/ContentTemplate＞
＜/atlas:UpdatePanel＞
＜atlas:UpdatePanel ID="UpdatePanel2" runat="server"＞
＜ContentTemplate＞
＜asp:Panel ID="Panel2" runat="server" BorderStyle="Solid" Height="198px" Width="194px"＞
＜script src="http://www.clocklink.com/embed.js"＞
＜/script＞
＜strong＞Current Time in Japan＜/strong＞

＜script type="text/javascript" language="JavaScript"＞
obj = new Object;
obj.clockfile = "0008-Yellow.swf";
obj.TimeZone = "JST";
obj.width = 200;
obj.height = 200;
obj.wmode = "transparent";
showClock(obj);
＜/script＞
＜/asp:Panel＞
＜/ContentTemplate＞
＜/atlas:UpdatePanel＞

　　然后，再把一个新的＜atlas:DragOverlayProperties＞控件添加到＜atlas:DragOverlayExtender＞以扩展第二个面板控件：

＜atlas:DragOverlayExtender ID="DragOverlayExtender1" runat="server"＞
＜atlas:DragOverlayProperties TargetControlID="Panel1" Enabled="true" ProfileProperty="Panel1Loc" /＞
＜atlas:DragOverlayProperties TargetControlID="Panel2" Enabled="true" ProfileProperty="Panel2Loc" /＞
＜/atlas:DragOverlayExtender＞

　　在Web.config文件中，添加另一个名字为Panel2Loc的Profile属性：

＜profile＞
＜properties＞
＜add name="Panel1Loc" type="System.String" /＞
＜add name="Panel2Loc" type="System.String" /＞
＜/properties＞
＜/profile＞

　　最后，修改setProperties和getProperties属性以包括Panel2Loc Profile属性：

＜profileService enabled="true"
setProperties="Panel1Loc;Panel2Loc"
getProperties="Panel1Loc;Panel2Loc" /＞

　　按F5测试应用程序。现在，你能够拖放这两个时钟，并且即使你重载页面，它们仍然会保持在相同的位置处(参考图5)。

图5.拖放两个面板控件。