Working With DragPanelExtender Control in AJAX

  • A K
  • Updated date Feb 03, 2012

Introduction

The DragPanelExtender control allows the user to drag controls independently on the web form. It makes user controls dragable. It has two main properties which are used for this. They are
DragHandleID and TargetControlID.

  • DragHandleID : Used to set the control ID which will be associated with the DragPanelExtender control.
  • TargetControlID : The ID of a Panel to make dragable.
Follow the given steps to use this control.

Step 1 :
Take an ASP.Net web application -> Go to ToolBar and take ScriptManager.

Step 2 : Take two Panel controls, two Label controls and one TextBox control and write some text. Look at the following code.

<asp:Panel ID="Panel1" runat="server">
         <p style="color:Green;">This is simple example of DragPanelExtender control.<br />
         You can drag the following panel area at any where on the form. </p>
           <asp:Panel ID="Panel2" Width="30%" Height="20%" BorderWidth="1px" BorderStyle="Solid" BorderColor="black" runat="server">
          <asp:Label ID="Label1"  runat="server" Text="Dragable Panel.." ForeColor="Red" Font-Bold="true"></asp:Label>
           <table>     
           <tr>
           <td><asp:Label ID="Label2" runat="server" Font-Bold="true" Font-Size="Larger" ForeColor="Red"
           Text
="Name"></asp:Label></td>&nbsp&nbsp&nbsp
           <td><asp:TextBox ID="TextBox2" runat="server"></asp:TextBox></td>
           </tr>  
           </table>
           </asp:Panel>
           <p style="color:Green;">It is simple example of DragPanelExtender control.....</p>  
        </asp:Panel>

Step 3 : Go to the ToolBox and add the
DragPanelExtender control to the form.



Step 4: Set its
DragHandleID and TargetControlID property.

<
asp:DragPanelExtender ID="DragPanelExtender1" DragHandleID="Panel1" TargetControlID="Panel2" runat="server">
      </asp:DragPanelExtender
>

Code on .aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%
@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
html xmlns="http://www.w3.org/1999/xhtml">
<
head runat="server">
    <title></title>
    <style type="text/css">
    .dragablepanel{
      background-color: #FFC0FF;
      height: 200px;
      width: 400px;
      border-bottom-color: black;
}

</
style>
</
head>
<
body>
     <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div>
    <asp:DragPanelExtender ID="DragPanelExtender1" DragHandleID="Panel1" TargetControlID="Panel2" runat="server">
      </asp:DragPanelExtender>
        <asp:Panel ID="Panel1" runat="server">
         <p style="color:Green;">This is simple example of DragPanelExtender control.<br />
         You can drag the following panel area at any where on the form. </p>
           <asp:Panel ID="Panel2" Width="30%" Height="20%" BorderWidth="1px" BorderStyle="Solid" BorderColor="black" runat="server">
          <asp:Label ID="Label1"  runat="server" Text="Dragable Panel.." ForeColor="Red" Font-Bold="true"></asp:Label>
           <table>     
           <tr>
           <td><asp:Label ID="Label2" runat="server" Font-Bold="true" Font-Size="Larger" ForeColor="Red"
           Text
="Name"></asp:Label></td>&nbsp&nbsp&nbsp
           <td><asp:TextBox ID="TextBox2" runat="server"></asp:TextBox></td>
           </tr>  
           </table>
           </asp:Panel>
           <p style="color:Green;">It is simple example of DragPanelExtender control.....</p>  
        </asp:Panel> 
        <script type="text/javascript">
            function setBodyHeight()
             {
                document.body.style.height = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight) + "px";
             }
            setBodyHeight();  
 </script>
    </div>
    </form
>

</
body>
</
html>
  
Run the application.

Output


You can Drag the Panel area which contains a Label and TextBox to anywhere on the form.



Hare are some related resources.

Web Paging Navigation Control

DropPanelExtender Control in AJAX Using ASP.NET

AdRotator Control in AJAX

Getting Started with AJAX 1.0