Ajax DragPanelExtender Control in VB.NET

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

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.
ASP-page1.gif

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.
webforms.gif

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.

drag-and-drop.gif

Categories

More Articles

© 2020 DotNetHeaven. All rights reserved.