前面曾经使用DragOverlayExtender来实现过拖放功能,DragPanel也可以使我们很容易的为ASP.NET面板加上拖放功能。DragPanel直接封装了Atlas中的客户端控件Sys.UI.FloatingBehavior,它为如何向已有的Behavior添加一个Extender提供了很好的示例。
主要内容
1.DragPanel Extender介绍
2.完整示例
一.DragPanel Extender介绍
前面曾经使用DragOverlayExtender来实现过拖放功能,DragPanel也可以使我们很容易的为ASP.NET面板加上拖放功能。DragPanel直接封装了Atlas中的客户端控件Sys.UI.FloatingBehavior,它为如何向已有的Behavior添加一个Extender提供了很好的示例。示例代码:
<
atlasToolkit:DragPanelExtender
ID
="DragPanelExtender1"
runat
="server"
>
![None.gif](/Images/OutliningIndicators/None.gif)
<
atlasToolkit:DragPanelProperties
![None.gif](/Images/OutliningIndicators/None.gif)
TargetControlID
="PanelContenter"
![None.gif](/Images/OutliningIndicators/None.gif)
DragHandleID
="PanelHeader"
/>
![None.gif](/Images/OutliningIndicators/None.gif)
</
atlasToolkit:DragPanelExtender
>
它的属性非常简单:
属性 | 描述 |
TargetControlID | 要实现拖放功能的目标Panel ID |
DragHandleID | 拖动处理Panel ID,当用户单击并拖动它的时候,目标控件将随着一起移动。 |
二.完整示例
DragPanel的使用非常简单,下面看一个简单的示例。新建WebSite后,在ASPX页面中加入:
<%
@ Register Assembly="AtlasControlToolkit"
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
Namespace="AtlasControlToolkit"
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
TagPrefix="atlasToolkit"
%>
添加两个Panel,分别用来作为目标拖动Panel和DragHandle Panel:
<
div
style
="height: 300px; width: 150px; float: left; padding: 5px;"
>
![None.gif](/Images/OutliningIndicators/None.gif)
<
asp:Panel
ID
="PanelContenter"
runat
="server"
Width
="24%"
Height
="251px"
>
![None.gif](/Images/OutliningIndicators/None.gif)
<
asp:Panel
ID
="PanelHeader"
style
="cursor: move"
BorderStyle
="Solid"
BorderWidth
="1px"
BorderColor
="black"
runat
="server"
Width
="134px"
Height
="20px"
>
![None.gif](/Images/OutliningIndicators/None.gif)
<
div
style
="cursor: move"
><
strong
>
Drag Me
</
strong
></
div
>
![None.gif](/Images/OutliningIndicators/None.gif)
</
asp:Panel
>
![None.gif](/Images/OutliningIndicators/None.gif)
<
asp:Panel
BorderStyle
="Solid"
Width
="133"
BackColor
="#AFC5FE"
ForeColor
="Black"
Font-Size
="small"
BorderWidth
="1px"
BorderColor
="black"
ID
="Panel9"
runat
="server"
Height
="150px"
>
![None.gif](/Images/OutliningIndicators/None.gif)
<
div
>
这个面板可拖动!
</
div
>
![None.gif](/Images/OutliningIndicators/None.gif)
</
asp:Panel
>
![None.gif](/Images/OutliningIndicators/None.gif)
</
asp:Panel
>
![None.gif](/Images/OutliningIndicators/None.gif)
</
div
>
添加DragPanelExtender,并设置相关的参数:
<
atlasToolkit:DragPanelExtender
ID
="DragPanelExtender1"
runat
="server"
>
![None.gif](/Images/OutliningIndicators/None.gif)
<
atlasToolkit:DragPanelProperties
![None.gif](/Images/OutliningIndicators/None.gif)
TargetControlID
="PanelContenter"
![None.gif](/Images/OutliningIndicators/None.gif)
DragHandleID
="PanelHeader"
/>
![None.gif](/Images/OutliningIndicators/None.gif)
</
atlasToolkit:DragPanelExtender
>
运行效果如下:
![](https://i-blog.csdnimg.cn/blog_migrate/ad98d4faf962faa3714cd5e4a68f3095.gif)
拖放:
![](https://i-blog.csdnimg.cn/blog_migrate/f234a80730fd49fd9b00ec3ab0339adf.gif)
完整示例下载:http://files.cnblogs.com/Terrylee/DragPanelExtenderDemo.rar