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

　　摘要 有时，ajax看上去为web页面平添了一分神秘的色彩。如果页面能够支持一些小件（例如图像和文本块）的拖放操作，那么，这明显会使访问者眼前一亮。在本文中，你会看到，利用微软atlas你也会非常容易地在客户端实现类似的鼠标拖放功能。

　　一、 引言

　　你能够把一个相当酷的特征添加到你的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"；这样以来，你的页面就能够支持部分页面更新功能：

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

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

　　三、 个性化页面

　　现在，既然你已经能够在一个页面上拖放一个控件，那么你应该会意识到，当该应用程序重新启动时，该控件又恢复到它的原始位置。在实际情况下，用户往往要求应用程序记住该页面的设置。为此，我们需要使用asp.net 2.0提供的profile服务。

　　为了使用asp.net 2.0提供的profile服务，你需要做一些准备工作。首先，通过把下列内容添加到web.config，从而把一个profile属性添加到应用程序中：

图3.aspnetdb.mdf是存储你的页面中元素的位置数据的数据库。

图4.上面这一行包含被显示的profile属性的值。

　　五、 添加更多的面板

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

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

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

　　六、 使用dragpanel控件实现可选的拖放

　　除了使用＜atlas:dragoverlayextender＞控件在web页面上实现拖放操作之外，你还能够使用包含在atlas control toolkit中的dragpanelextender控件。基本上，这个dragpanelextender控件非常类似于＜atlas:dragoverlayextender＞控件，除了它没有内置的存储被拖动控件的位置信息的能力之外。

　　为了实际观察该dragpanelextender控件的工作方式，让我们把一个新的web表单添加到页面(default2.aspx)中。然后，切换到该表单的code-behind，并且按如下所示修改该表单的源码：

图6.使用这种dragpanelextender控件，你的用户会更直观地意识到这一面板是可移动的。

图7.把光标改为"移动"型以便用户从可移动的面板获得更直观的视觉效果。