利用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"；这样以来，你的页面就能够支持部分页面更新功能：

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

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

＜atlas:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true" /＞
＜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＞

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

＜atlas:UpdatePanel ID="UpdatePanel1" 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="ScriptManager1" runat="server" EnablePartialRendering="true" /＞
＜atlas:DragOverlayExtender ID="DragOverlayExtender1" runat="server"＞
＜atlas:DragOverlayProperties TargetControlID="Panel1" Enabled="true"/＞
＜/atlas:DragOverlayExtender＞

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

＜body style="height: 100%;"＞

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

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

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

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

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

　　然后，你需要去掉Web.config中＜profileService＞元素处的注释；这样以来，现在，Atlas便能够使用服务器端的Profile服务。然后，按如下所示设置它的属性：

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

　　基本上，你是在告诉Atlas你想读写这个名字为Panel1Loc的Profile属性。

　　然后，把ProfileProperty属性添加到＜atlas:DragOVerlayProperties＞控件，并且把它设置为 "Panel1Loc"。这将允许它保存该面板控件的位置；该控件要扩展到刚才加入的这个名字为Panel1Loc的Profile属性：

　　最后，添加＜atlas:ProfileScriptService＞控件并且把它的AutoSave属性设置为true。这将导致面板控件的位置数据被自动保存到Profile属性中-无论何时拖动它：

＜atlas:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true" /＞
＜atlas:ProfileScriptService ID="ProfileScriptService1" runat="server" AutoSave="true" /＞

　　现在，再次按F5测试该应用程序，试着把时钟拖放到一个新的位置。停止该应用程序并再次运行它；结果，你将看到，时钟现在又回到其原来的位置。

　　四、分析数据库

　　为了验证时钟的位置信息真正被存储起来了，你可以刷新你的工程下的App_Data文件夹（见图3）；这时，你应该能够看到新创建的ASPNETDB.MDF数据库。这个数据库为ASP.NET所用来保存应用程序相关的数据。

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

　　双击ASPNETDB.MDF文件。然后，在Server Explorer中，展开Tables项，右击aspnet_Profile表格并选择"Show Table Data"。表格的第一行显示出Profile属性的值（见图4）。

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

　　【作者注】在本文示例中，我使用了缺省的Windows认证方式；因此，我的Windows登录将作为用户名(单独存储在aspnet_Users表格内)。注意，Profile服务还可以在表单认证方式下工作，而且还可以针对匿名用户进行认证。
　　三、个性化页面

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

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

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

　　然后，你需要去掉Web.config中＜profileService＞元素处的注释；这样以来，现在，Atlas便能够使用服务器端的Profile服务。然后，按如下所示设置它的属性：

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

　　最后，添加＜atlas:ProfileScriptService＞控件并且把它的AutoSave属性设置为true。这将导致面板控件的位置数据被自动保存到Profile属性中-无论何时拖动它：

＜atlas:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true" /＞
＜atlas:ProfileScriptService ID="ProfileScriptService1" runat="server" AutoSave="true" /＞

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

　　双击ASPNETDB.MDF文件。然后，在Server Explorer中，展开Tables项，右击aspnet_Profile表格并选择"Show Table Data"。表格的第一行显示出Profile属性的值（见图4）。

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

　　【作者注】在本文示例中，我使用了缺省的Windows认证方式；因此，我的Windows登录将作为用户名(单独存储在aspnet_Users表格内)。注意，Profile服务还可以在表单认证方式下工作，而且还可以针对匿名用户进行认证。
　　五、添加更多的面板

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

　　首先，让我们把一个新的包含另一个面板控件(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.拖放两个面板控件。
六、使用DragPanel控件实现可选的拖放

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

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

＜atlas:ScriptManager ID="ScriptManager1" runat="server"＞
＜/atlas:ScriptManager＞
＜asp:Panel ID="Panel1" runat="server" Width="125px" BorderStyle="Double"＞
＜asp:Panel ID="Panel2" runat="server" Height="1px" Width="100%" BorderStyle="Double" BackColor="White"＞
＜div style="text-align: center"＞Drag Me＜/div＞
＜/asp:Panel＞
＜center＞
＜asp:Panel ID="Panel3" runat="server" Height="50px" Width="125px"＞
＜asp:Image ID="Image1" runat="server" Height="318px" Width="475px" ImageUrl="~/Fish.jpg" /＞
＜/asp:Panel＞
＜/center＞
＜/asp:Panel＞

基本上，在上面的代码中，你实现了：

· 一个＜atlas:ScriptManager＞控件。

· 两个Panel控件(Panel2和Panel3)嵌入在第三个面板控件(Panel1)中。

· Panel2包含一个＜div＞元素，其中包含一个字符串"Drag Me"。

· Panel3中包含一幅图像-Fish.jpg(你需要把该图像添加到工程中)。

DragPanelExtender控件允许你指定哪个面板控件应该允许拖动(在此，是Panel2)以及相应的应该移动的面板控件(在此，是Panel1)。为此，把下列片断添加到页面中：

＜cc1:DragPanelExtender ID="DragPanelExtender1" runat="server"＞
＜cc1:DragPanelProperties
DragHandleID="Panel2"
TargetControlID="Panel1" /＞
＜/cc1:DragPanelExtender＞

现在，用户能够拖动Panel2，而且相应的Panel1会随之移动。现在，按F5测试应用程序。现在，通过拖动包含字符串"Drag Me"的面板，你能够移动该包含图像的面板(见图6)。

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

七、改变为一个拖动图标

如果你善于观察，那么你会注意到，当鼠标停在"Drag Me"面板上时，光标并没有改变成一个"移动"光标形式(它是一个具有四个方向的箭头图标)。因此，说实在的，这并算是一种良好的UI设计，因为它还没有向用户准确表达出"这是一个可移动的面板"这一信息。为此，你需要添加一个层叠式样表（CSS）。

现在，请把一个CSS式样表添加到工程（从Solution Explorer中右击工程名，然后选择"Add New Item…"，再选择"Style Sheet"）。在此，我们使用了缺省名：StyleSheet.css。然后，使用下列内容填充该式样表：

.dragIcon {
width:100%;
height:21px;
background-color:#FFF;
text-align:center;
cursor:move;
font-weight:bold;
}

现在，让我们回到Default2.aspx文件的源码视图，通过添加下面高亮加粗的元素以便链接到新添加的stylesheet：

＜head runat="server"＞
＜title＞Untitled Page＜/title＞
＜link href="StyleSheet.css" rel="stylesheet" type="text/css" /＞
＜/head＞

为确保鼠标在"Drag Me"面板上移动，请按如下所示设置＜div＞元素的class属性：

＜asp:Panel ID="Panel2" runat="server" Height="1px" Width="100%" BorderStyle="Double" BackColor="White"＞
＜div class="dragIcon" style="text-align: center"＞
Drag Me＜/div＞
＜/asp:Panel＞

按F5再次测试该应用程序。现在，当你的鼠标在"Drag Me"面板上移动时，它会改变为"移动"光标形状（请见图7）。

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

八、小结

通过本文，你了解了如何使用Atlas在你的Web页面上轻松地实现拖放功能。除了能够扩展Panel控件之外，＜atlas: DragOverlayExtender＞控件还能够用于扩展其它Web服务器控件。作为选择，你还能够从Atlas Control Toolkit中使用DragPanelExtender控件，从而使Panel控件可以移动。最后，你学习了如何把一个可移动控件的缺省光标改变为"移动"光标，以便向用户传达更具可视化的效果。

本文转自朱先忠老师51CTO博客，原文链接： http://blog.51cto.com/zhuxianzhong/59887，如需转载请自行联系原作者