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; 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