Atlas学习手记（18）：使用DragPanel实现拖放面板

前面曾经使用DragOverlayExtender来实现过拖放功能，DragPanel也可以使我们很容易的为ASP.NET面板加上拖放功能。DragPanel直接封装了Atlas中的客户端控件Sys.UI.FloatingBehavior，它为如何向已有的Behavior添加一个Extender提供了很好的示例。

主要内容[/b]

1．DragPanel Extender介绍

2．完整示例

一．DragPanel Extender介绍[/b]

前面曾经使用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>
它的属性非常简单：

属性[/b]	描述[/b]
TargetControlID	要实现拖放功能的目标Panel ID
DragHandleID	拖动处理Panel ID，当用户单击并拖动它的时候，目标控件将随着一起移动。

二．完整示例[/b]

DragPanel的使用非常简单，下面看一个简单的示例。新建WebSite后，在ASPX页面中加入：

<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>
添加DragPanelExtender，并设置相关的参数：

<atlasToolkit:DragPanelExtender ID="DragPanelExtender1" runat="server">

<atlasToolkit:DragPanelProperties

TargetControlID="PanelContenter"

DragHandleID="PanelHeader" />

</atlasToolkit:DragPanelExtender>
运行效果如下：



拖放：



完整示例下载：http://files.cnblogs.com/Terrylee/DragPanelExtenderDemo.rar