六、 使用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控件可以移动。最后，你学习了如何把一个可移动控件的缺省光标改变为"移动"光标，以便向用户传达更具可视化的效果。
上一页 [1] [2] [3] [4]
打印文档
推荐好友 
返回顶部
增大字体 
减少字体