DropPanelExtender Control in AJAX Using ASP.NET


Introduction 

AJAX (Asynchronous JavaScript and XML) is a new web development technique used for interactive websites. With AJAX help, we can develop web applications and retrieve small amounts of data from a web server. AJAX consists of a different type of technology.

  • JavaScript
  • XML
  • Asynchronous Call to the server

DragPanelExtenderControl 

The DragPanelExtender makes it extremely simple to add a 'drag' to your controls. The DragPanelExtender targets any ASP.NET Panel and allows additional parameters that signifies the control to use as the "Drag Handle". With the help of this control we can move our panel from one place to another on the client side. The user can freely drag the Panel around the web page using the drag handle.

DragPanelExtender Control Properties

  • TargetControlID
  • BehaviorID
  • DragHandleID
  • Enabled

Step 1 : Open Visual Studio 2010.

  • Go to File->New->WebSite
  • Select ASP.NET Empty WebSite
dr1.gif

Step 2 : Go to Solution Explorer and right-click.

  • Select Add->New Item
  • Select WebForm
  • Default.aspx page open
dr2.gif

Step 3 :  Go to Default.aspx page and click on the [Design] option and drag control from Toolbox.

  • Drag Panel control, Label, Button, HiddenField

Step 4 : Go to Default.aspx page[Source]option and drag panel. Inside the Panel control add another Panel Control "Panel2".

Code :

<asp:Panel ID="Panel1" runat="server" Width="250px">
                     <asp:Panel ID="Panel2" runat="server" Width="125%" Height="115%"
                         BorderWidth="3px" BorderStyle="Ridge"
                        BorderColor="#0066FF" BackColor="#66FFCC">
                         PLEASE DRAG THIS CONTROL
                    </asp:Panel>   
                </asp:Panel
>

Step 5 : Go to Default.aspx page[Design] option drag DragPanelExtender control from AjaxControlToolkit.

drop3.gif

Step 6 : Now click on the DragPanelExtender Control properties and define TargetControlID. BehaviorID.

Code :

<asp:DragPanelExtender ID="Panel1_DragPanelExtender" BehaviorID="DragP1" runat="server"
            DragHandleID="Panel1" Enabled="True" TargetControlID="Panel1">
        </asp:DragPanelExtender
>

Step 7 : Now add a script to maintain the position of the Panel after postback. We will be adding a HiddenField which will store the position of the dragged panel. The value has been initially set to "1".

Code :

<asp:HiddenField ID="HiddenField1" runat="server" Value="1" />

Create JavaScript

<
script type="text/javascript" language="javascript">
            function pageLoad() {
                $find('DragP1').add_move(savePanelPosition);
                var elem = $get("<%=HiddenField1.ClientID%>");
                if (elem.value != "0") {
                    var temp = new Array();
                    temp = elem.value.split(';');
                    $find('<%=Panel1_DragPanelExtender.BehaviorID%>').set_location(new Sys.UI.Point(parseInt(temp[0]), parseInt(temp[1])));
                }
            }
            function savePanelPosition() {
                var elem = $find('DragP1').get_element();
                var loc = $common.getLocation(elem);
                var elem1 = $get("<%=HiddenField1.ClientID%>");
                elem1.value = loc.x + ';' + loc.y;
            }
        </script
>

Step 8 :  Drag and drop a ScriptManager control to the form. Also add a <div> tag to the page with the following properties.

<form id="form1" runat="server" style="background-color: #808080">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <div>  
         <div style="height: 100px; width: 350px; padding: 8px; background-color
: #E0B49E;">

Step 9 : Go to the Default.aspx page option and write a code.

Code :

<form
id="form1" runat="server" style="background-color: #808080">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <div>  
         <div style="height: 100px; width: 350px; padding: 8px; background-color: #E0B49E;">
                <asp:Panel ID="Panel1" runat="server" Width="250px">
                     <asp:Panel ID="Panel2" runat="server" Width="125%" Height="115%"
                         BorderWidth="3px" BorderStyle="Ridge"
                        BorderColor="#0066FF" BackColor="#66FFCC">
                         PLEASE DRAG THIS CONTROL
                    </asp:Panel>   
                </asp:Panel>
            </div>      
        </div>
        <asp:DragPanelExtender ID="Panel1_DragPanelExtender" BehaviorID="DragP1" runat="server"
            DragHandleID="Panel1" Enabled="True" TargetControlID="Panel1"
        </asp:DragPanelExtender>
        <script type="text/javascript" language="javascript">
            function pageLoad() {
                $find('DragP1').add_move(savePanelPosition);
                var elem = $get("<%=HiddenField1.ClientID%>");
                if (elem.value != "0") {
                    var temp = new Array();
                    temp = elem.value.split(';');
                    $find('<%=Panel1_DragPanelExtender.BehaviorID%>').set_location(new Sys.UI.Point(parseInt(temp[0]), parseInt(temp[1])));
                }
            }
            function savePanelPosition() {
                var elem = $find('DragP1').get_element();
                var loc = $common.getLocation(elem);
                var elem1 = $get("<%=HiddenField1.ClientID%>");
                elem1.value = loc.x + ';' + loc.y;
            }
        </script>
    <asp:HiddenField ID="HiddenField1" runat="server" Value="1" />
    </form
>
</body>

Step 10 :  Now run the application by Pressing F5.

drop1.gif
Step 11 : Now you can drag this control and change the position in the panel.

drop2.gif

When you will try to drop this control outside the panel it will return back to the panel.

Reource :