altas(ajax)控件(九)：可拖动面板DragPanel

 

使用非常简单：

            <asp:Panel ID="Panel6" runat="server" Width="250px" style="z-index: 20;">
                <asp:Panel ID="Panel7" runat="server" Width="100%" Height="20px"
                    BorderStyle="Solid" BorderWidth="2px" BorderColor="black">
                        <div class="dragMe">用鼠标拖动</div>
                </asp:Panel>
                <asp:Panel  ID="Panel8" runat="server" Width="100%" Height="250px"
                    Style="overflow: scroll;" BackColor="#0B3D73" ForeColor="whitesmoke"
                    BorderWidth="2px" BorderColor="black" BorderStyle="Solid" >
                        <div>
                            <p>This panel will reset its position on a postback or page refresh.</p>
                            <hr />
                            <p><%= GetContentFillerText() %></p>
                        </div>
                </asp:Panel>
            </asp:Panel>
        <ajaxToolkit:DragPanelExtender ID="DragPanelExtender1" runat="server"
            TargetControlID="Panel6"
            DragHandleID="Panel7" />

 

 

·                  TargetControlID – 指定可以拖动的面板的ID

·                  DragHandleID – 指定一个ID，作为拖动面板的标题栏。

 

效果如下：http://www.asp.net/AJAX/Control-Toolkit/Live/DragPanel/DragPanel.aspx