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>

它的属性非常简单：

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

二．完整示例

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

<%@ Register Assembly="AtlasControlToolkit" 

            Namespace="AtlasControlToolkit" 

            TagPrefix="atlasToolkit" %>

添加两个Panel，分别用来作为目标拖动Panel和DragHandle Panel：

<div style="height: 300px;  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>

运行效果如下：

拖放：

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