AJAX ControlToolkit學習日誌-DragPanel(8)

      DragPanel控制項用於實現在網頁上拖動一個面板，對它的位置進行從新的安排。

下面來看一個樣本：

1)建立一個ASP.NET AJAX-Enabled Web Project的工程項目，命名為DragPanel1。

2)在頁面上拖放三個Panel，分別命名為DragHandlePanel，Content和DragPanel。DragHandlePanel作為拖的事件處理，Content作為存放內容，DragPanel整個作為DragPanelExtender的目標對象。代碼如下：
 1            <div style="Height:300px;Width:150px;">
 2                <asp:Panel ID="DragPanel" runat="server">
 3                    <asp:Panel ID="DragHandlePanel" Height="20px" Width="100%" runat="server">
 4                        <div class="dragMe">Drag Me</div>
 5                    </asp:Panel>
 6                    <asp:Panel ID="Content" Height="100px" Width="100%" runat="server">
 7                        <div>fjeofjioefjojefiefef</div>
 8                    </asp:Panel>
 9                </asp:Panel>
10                
11            </div>

3)在頁面上拖放一個DragPanelExtender，設定它的一些屬性。代碼如下：
            <cc1:DragPanelExtender ID="DragPanelExtender1" TargetControlID="DragPanel" DragHandleID="DragHandlePanel" runat="server"></cc1:DragPanelExtender>

視圖如下：



4)按下CTRL+F5，在瀏覽器中查看。效果如下：