ARTICLE

DragPanelExtender Control in Ajax

Posted by Rajesh Kumar in Articles | ASP.NET AJAX in VB.NET on September 19, 2011

Tags: Ajax, B Tutorials, B.NET, jax Control ToolKit, VB

DragPanel allow us to move the panel arround our web page in ASP.NET application.

Tweet
1146
1

Reader Level: Beginner

Introduction : The DragPanel Control allow user can frealy drag the panel arround on web page. Drag panel help user easily add draggability to their web page.

Properties of the DragPanelExtender Control.

TargetControl ID.
DragHandle ID.

With the help of this property user can drag the overall panel and web page.

Step : 1 Open visual studio and go to file menu.

Select WebSite option.
Select ASP.NET WebSite.
Default.aspx page open.

Step : 2 Go to SolutionExplorer and right click.

Select add new items.
Select WebForms option and add .
Drag and drop control in toolbox .
Write code.

Code :

<title> DRAG PANEL CONTROL</title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div>
        <asp:Panel ID="Panel1" runat="server" Width = "130 PX">
        </asp:Panel>
        <asp:Panel ID="Panel2" runat="server" Height = "50px" Width ="50%" BorderStyle = "Solid" BorderColor = "Aqua">
        <div class ="DRAGME">drag control</div>
        </asp:Panel>
        <asp:Panel ID="Panel3" runat="server" Width ="160PX" Height ="150PX" Style = "OVERFLOW:SCROLL" BorderStyle = "Solid" BackColor ="#0B3D73">
        </asp:Panel>
<div>
<p>This panel will reset its position on a postback or
page refresh.
</p>
<hr />
</div>
</div>
<div style="clear: both;"></div>
    <asp:DragPanelExtender ID="DragPanelExtender1" runat="server" TargetControlID = "Panel1" DragHandleID = "Panel2"/>
    </form>
</body>
</html>
Step : 3 Now press F5 and run the program.