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