Home > DeveloperSection > Articles > Ajax Toolkit DragPanelExtender Control in ASP.Net

Ajax Toolkit DragPanelExtender Control in ASP.Net


AJAX AJAX 
Ratings:
0 Comment(s)
 14972  View(s)
Rate this:

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.

DragPanel Properties:

TargetControlID - The ID of a Panel to make draggable.

DragHandleID - 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.

 

Code:

//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">

</cc1:DragPanelExtender>

 

<asp:Panel ID="Panel2" runat="server" Width="700px" Height="600px">

<asp:Panel ID="Panel1" runat="server" BackColor="#6666FF" Width="500px" Height="210px">

<br />

<asp:Label ID="Label2" runat="server" Text="Drag" CssClass="dragIcon'"> </asp:Label>

<asp:Image ID="Image1" runat="server" ImageUrl="~/Untitled.png" />

</asp:Panel>

</asp:Panel>

Here DragHandleIDis "Label2" when drag Label2 and move then (TargetControlID="Panel1")Panel1 will also move

Run the project

AjaxControl Toolkit DragPanelExtender Control in ASP.Net

When drag and move drag text then panel will also move

AjaxControl Toolkit DragPanelExtender Control in ASP.Net

When page will refresh then moved panel will be its original position

AjaxControl Toolkit DragPanelExtender Control in ASP.Net


Don't want to miss updates? Please click the below button!

Follow MindStick