Home / AJAX

HOW TO Use the DragPanel Control

RSS
Modified on 2009/12/24 21:17 by Chris Muench Categorized as Uncategorized

DragPanel Demonstration

floating floating floating floating floating floating floating floating floating floating floating floating
floating floating floating floating floating floating floating floating floating floating floating floating
floating floating floating floating floating floating floating floating floating floating floating floating
floating floating floating floating floating floating floating floating floating floating floating floating






DragPanel Description

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.

Video - How Do I: Use the ASP.NET AJAX DragPanel Control?

DragPanel Client Code Sample

<!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>Untitled Page</title> <style type="text/css"> </style> <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.js" type="text/javascript"></script> <script src="http://ajax.microsoft.com/ajax/beta/0911/Start.debug.js" type="text/javascript"></script> <script src="http://ajax.microsoft.com/ajax/beta/0911/extended/ExtendedControls.debug.js" type="text/javascript"></script> <script type="text/javascript"> Sys.debug = true; Sys.require(Sys.components.draggable, function() { $("#dragme").draggable({handle: Sys.get("#dragme")}); }); </script> </head> <body> <form id="form1" runat="server" style="width:1000px;height:1000px"> <div> <div id="dragme"> floating floating floating floating floating floating floating floating floating floating floating floating <br /> floating floating floating floating floating floating floating floating floating floating floating floating <br /> floating floating floating floating floating floating floating floating floating floating floating floating <br /> floating floating floating floating floating floating floating floating floating floating floating floating <br /> </div> </div> </form> </body> </html>

DragPanel Client Properties

DragPanel Server Code Sample

        <div class="demoheading">DragPanel Demonstration</div>
        <div style="height: 300px; width: 250px; float: left; padding: 5px;" >
            <asp:Panel ID="Panel6" runat="server" Width="250px" style="z-index: 20;">
                <asp:Panel ID="Panel7" runat="server" Width="100%" Height="20px"
                    BorderStyle="Solid" BorderWidth="2px" BorderColor="black">
                        <div class="dragMe">Drag Me</div>
                </asp:Panel>
                <asp:Panel  ID="Panel8" runat="server" Width="100%" Height="250px"
                    Style="overflow: scroll;" BackColor="#0B3D73" ForeColor="whitesmoke"
                    BorderWidth="2px" BorderColor="black" BorderStyle="Solid" >
                        <div>
                            <p>This panel will reset its position on a postback or page refresh.</p>
                            <hr />
                            <p><%= GetContentFillerText() %></p>
                        </div>
                </asp:Panel>
            </asp:Panel>
        </div>       
        <div style="clear: both;"></div>
        
        <ajaxToolkit:DragPanelExtender ID="DragPanelExtender1" runat="server"
            TargetControlID="Panel6"
            DragHandleID="Panel7" />

DragPanel Server Properties

The properties in italics are optional.

<ajaxToolkit:DragPanelExtender ID="DPE1" runat="server"
    TargetControlID="Panel3"
    DragHandleID="Panel4" />
  • TargetControlID - The ID of a Panel to make draggable.
  • DragHandleID - The ID of a control that will serve as the "drag handle" for the panel. When the user clicks and drags this control, the panel will move.


DragPanel Additional Code Samples