Atlas学习手记(18):使用DragPanel实现拖放面板
前面曾经使用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">
<atlasToolkit:DragPanelProperties
TargetControlID="PanelContenter"
DragHandleID="PanelHeader" />
</atlasToolkit:DragPanelExtender>
<atlasToolkit:DragPanelProperties
TargetControlID="PanelContenter"
DragHandleID="PanelHeader" />
</atlasToolkit:DragPanelExtender>
它的属性非常简单:
属性 |
描述 |
TargetControlID |
要实现拖放功能的目标Panel ID |
DragHandleID |
拖动处理Panel ID,当用户单击并拖动它的时候,目标控件将随着一起移动。 |
二.完整示例
DragPanel的使用非常简单,下面看一个简单的示例。新建WebSite后,在ASPX页面中加入:
<%@ Register Assembly="AtlasControlToolkit"
Namespace="AtlasControlToolkit"
TagPrefix="atlasToolkit" %>
Namespace="AtlasControlToolkit"
TagPrefix="atlasToolkit" %>
添加两个Panel,分别用来作为目标拖动Panel和DragHandle Panel:
<div style="height: 300px; width: 150px; float: left; padding: 5px;">
<asp:Panel ID="PanelContenter" runat="server" Width="24%" Height="251px">
<asp:Panel ID="PanelHeader" style="cursor: move" BorderStyle="Solid" BorderWidth="1px" BorderColor="black" runat="server" Width="134px" Height="20px">
<div style="cursor: move"><strong>Drag Me</strong></div>
</asp:Panel>
<asp:Panel BorderStyle="Solid" Width="133" BackColor="#AFC5FE" ForeColor="Black" Font-Size="small" BorderWidth="1px" BorderColor="black" ID="Panel9" runat="server" Height="150px">
<div>这个面板可拖动!</div>
</asp:Panel>
</asp:Panel>
</div>
<asp:Panel ID="PanelContenter" runat="server" Width="24%" Height="251px">
<asp:Panel ID="PanelHeader" style="cursor: move" BorderStyle="Solid" BorderWidth="1px" BorderColor="black" runat="server" Width="134px" Height="20px">
<div style="cursor: move"><strong>Drag Me</strong></div>
</asp:Panel>
<asp:Panel BorderStyle="Solid" Width="133" BackColor="#AFC5FE" ForeColor="Black" Font-Size="small" BorderWidth="1px" BorderColor="black" ID="Panel9" runat="server" Height="150px">
<div>这个面板可拖动!</div>
</asp:Panel>
</asp:Panel>
</div>
添加DragPanelExtender,并设置相关的参数:
<atlasToolkit:DragPanelExtender ID="DragPanelExtender1" runat="server">
<atlasToolkit:DragPanelProperties
TargetControlID="PanelContenter"
DragHandleID="PanelHeader" />
</atlasToolkit:DragPanelExtender>
<atlasToolkit:DragPanelProperties
TargetControlID="PanelContenter"
DragHandleID="PanelHeader" />
</atlasToolkit:DragPanelExtender>
运行效果如下:
拖放:
完整示例下载:https://files.cnblogs.com/Terrylee/DragPanelExtenderDemo.rar
支持TerryLee的创业产品Worktile
Worktile,新一代简单好用、体验极致的团队协同、项目管理工具,让你和你的团队随时随地一起工作。完全免费,现在就去了解一下吧。
https://worktile.com
Worktile,新一代简单好用、体验极致的团队协同、项目管理工具,让你和你的团队随时随地一起工作。完全免费,现在就去了解一下吧。
https://worktile.com