AJAX Control Toolkit DragPanel Tutorial ASP.NET C#
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.
For demonstrations purposes we will keep this tutorial relatively simple. We just want to show you how to add the extender and show you how it works. We will be building a simple webpage that will contain a PanelControl with some text in it, with the drag panel extender we will be able to drag it across the page.
Let’s begin
First add or open a new WebForm to this project and name it DragPanel.aspx
Next we will add a ToolScriptManager.
Now we can drag a PanelControl to the webform, we added some CSS styling to it, we kept it fairly simple, and we also added some text inside the panel.
Now we can add the star of the show, the DragPanel extender, this is a fairly simple step you can drag it into the Panel or you may click on the tab to the right inside of the Panel, and that’s it, very simple isn’t it?
DragPanel.aspx
It is extremely easy to use Visual Studio to build a new page.
<title>Drag Panel</title>
<style type="text/css">
.outerPanel {
border: solid 1px #C0C0C0;
background-color: #e1e1e1;
width: 200px;
height: 300px;
z-index:20;
padding: 2px;
}
.dragPanel {
border: solid 1px #FFFFFF;
background-color: #C0C0C0;
width: 194px;
height: 15px;
color: #FFFFFF;
font-weight:bold;
padding: 2px;
cursor: move;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</cc1:ToolkitScriptManager>
<cc1:DragPanelExtender ID="DragPanelExtender1" runat="server" TargetControlID="Panel1"
DragHandleID="Panel2">
</cc1:DragPanelExtender>
<asp:Panel ID="Panel1" runat="server" CssClass="outerPanel">
<asp:Panel ID="Panel2" runat="server" CssClass="dragPanel">
<b>Dragable Panel</b>
</asp:Panel>
<p>
Sample text Sample text Sample text
Sample text Sample text Sample text
Sample text Sample text Sample text
Sample text Sample text Sample text
</p>
</asp:Panel>
