Ajax Toolkit DragPanelExtender Control in ASP.Net
The DragPanel extender allows
users to easily add "draggability" to their controls. The
DragPanel targets any ASP.NET Panel and takes an additional parameter that
signifies the control to use as the "drag handle". Once initialized,
the user can freely drag the panel around the web page using the drag handle.
- The ID of a Panel to make draggable.
- The ID of a control that will serve as the "drag handle" for
the panel. When the user clicks and drags this control, the panel will move.
//we adds the script manager and drag panel extender which control the panel1 (we move this panel as given in fig)
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<cc1:DragPanelExtender ID="DragPanelExtender1" runat="server" TargetControlID="Panel1" DragHandleID="Label2">
<asp:Panel ID="Panel2" runat="server" Width="700px" Height="600px">
<asp:Panel ID="Panel1" runat="server" BackColor="#6666FF" Width="500px" Height="210px">
<asp:Label ID="Label2" runat="server" Text="Drag" CssClass="dragIcon'"> </asp:Label>
<asp:Image ID="Image1" runat="server" ImageUrl="~/Untitled.png" />
Here DragHandleIDis "Label2" when drag Label2 and move then (TargetControlID="Panel1")Panel1 will also move
Run the project
When drag and move drag text then panel will also move
When page will refresh then moved panel will be its original position