您当前的位置：飞翔学院-IT中国 → 编程开发 → AJAX → 文章内容

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

作者:佚名来源:不详发布时间:2007-12-10 22:12:14

五、添加更多的面板

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

　　首先，让我们把一个新的包含另一个面板控件(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)。