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，在浏览器中查看。效果如下：