【转】用Atlas库为Web页面加入鼠标拖放功能。

一、 引言

你能够把一个相当酷的特征添加到你的Web应用程序中：使用户能够定制自己的页面的外观感觉。并且，在经常情况下，用户都喜欢重新安排页面部分以适合他们自己的查看习惯。不妨让我们设想这样的情景：用户导航到某一个网站，能够选择其中的一部分(例如图像、文本和其它页面小件)，并且能够动态地移动它们。今天，借助于例如Atlas这样的AJAX技术，我们可以非常容易地实现这样的功能。

当然，在ASP.NET 2.0中，你还能够使用WebParts框架来构建与此极类似的特征。然而，如果你想使用一种更简单些的方法在你的页面中加入类似于WebParts这样的特征的话，那么，Atlas为你提供了一种解决方案。

在本文中，我将向你展示如何使你的Web页面部分"可移动";用户将能够使用基本的鼠标拖放操作来重新放置页面中的各个部分。特别是，我们可以借助ASP.NET 2.0提供的Profile服务实现页面的个性定制，并且针对每位用户保存相应的定制信息。

二、 构建应用程序

使用Visual Studio 2005创建一个新的Atlas应用程序，并且命名为"C:\DragandDrop"。然后，切换到Default.aspx页面的code-behind部分。

首先，把＜atlas:ScriptManager＞控件的EnablePartialRendering属性设置为"true";这样以来，你的页面就能够支持部分页面更新功能：现在，既然你已经在一个＜atlas:UpdatePanel＞控件中嵌入了一个面板控件，那么，接下来，你需要把一些内容添加到该面板控件中。为此，你既可以添加一些文本也可以添加另一个控件，例如Calendar、ImageMap，等等。在这个示例中，我想添加一个时钟以显示一个选定时区的时间。注意，在站点ClockLink.com处提供了许多时髦的时钟，你可以容易地把它们嵌入到你的web页面里面。这些时钟能够在客户端页面每隔一秒更新自身一次而不会导致一次页面重载。在此，你将添加一个显示新泽西州时间的时钟。为了嵌入这个钟，你只需要简单地插入下列以高亮加粗显示的脚本即可:

＜atlas:UpdatePanel ID=" runat="server" ＞
＜ContentTemplate＞

＜asp:Panel ID="Panel1" runat="server" BorderStyle="Solid" Height="198px" Width="194px"＞

＜script rc="http://www.clocklink.com/embed.js"＞

＜/script＞

＜strong＞Current Time in New Zealand＜/strong＞

＜script type="text/javascript" language="JavaScript"＞

　obj = new Object;

　obj.clockfile = "0010-Red.swf";

　obj.TimeZone = "NZT";

　obj.width = 200;

　obj.height = 200;

　obj.wmode = "transparent";

　showClock(obj);

＜/script＞

＜/asp:Panel＞

＜/ContentTemplate＞

＜/atlas:UpdatePanel＞

至此，只要按下F5键，你就能够看到该页面的样式。图1显示了该时钟显示于一个面板控件内的情形。

图1.该屏幕快照显示了Default.aspx页面，其中的时钟每隔一秒更新一次时间。

停止运行应用程序。现在，让我们加入一些功能使上面的面板控件包含可移动的时钟。你将使用＜atlas:DragOverlayExtender＞控件来达到这一目的。其实，这个＜atlas:DragOverlayExtender＞控件继承自另一个控件并进一步把它转变成为一个可拖动的控件。最终，你能够在Web页面上任意拖放这个控件。现在，请添加＜atlas:DragOverlayExtender＞一个控件并对它进行配置-添加一个＜atlas:DragOverlayProperties＞控件并且设置它的TargetControlID属性为"Panel1"。还要记住：把它的Enabled属性设置为true:

＜atlas:ScriptManager ID=" runat="server" EnablePartialRendering="true" ScriptManager1? ＞

　＜atlas:DragOverlayExtender ID="DragOverlayExtender1" runat="server"＞

　＜atlas:DragOverlayProperties TargetControlID="Panel1" Enabled="true"/＞

＜/atlas:DragOverlayExtender＞

再次按F5键测试该应用程序。现在，你应该能够在页面上拖动这个时钟。然而，你会注意到，当你释放鼠标时，该时钟将总是返回到它的原始位置。因为你不能把该控件拖动到页面中生成的其它控件上并且你的页面上除了这个面板控件外一片空白，所以会发生这一现象。为此，你可以通过简单地在页面的＜body＞元素中添加下列属性来更正这个问题:

＜body style=" FONT 100%;?＞< height:>

按F5再次测试该应用程序。现在，你应该能够拖动该时钟，并把它拖放到页面的任何位置，只要你仍然在面板控件范围之内(见图2)。

图2.该屏幕快照显示了与图1相同的时钟，只不过我用鼠标把它拖到了一个新位置。

 

＜atlas:ScriptManager ID=" runat="server" EnablePartialRendering="true" FONT ＞< ScriptManager1?>

接下来，把一个＜atlas:UpdatePanel＞控件添加到该页面，并且在它内部添加＜ContentTemplate＞元素。之后，再把一个面板控件添加到该＜ContentTemplate＞元素并且按如下所示设置它的边界风格和尺寸 :

＜atlas:ScriptManager ID=" runat="server" EnablePartialRendering="true" ScriptManager1? ＞

＜div＞

＜atlas:UpdatePanel ID="UpdatePanel1" runat="server"＞

　＜ContentTemplate＞

＜asp:Panel ID="Panel1" runat="server" BorderStyle="Solid" Height="198px" Width="194px"＞

＜/asp:Panel＞

　＜/ContentTemplate＞

＜/atlas:UpdatePanel＞