asp.net c# tutorials and examples code for web developers

Saturday, November 14, 2009

How to use DragPanelExtender in asp.net ajax

DragPanelExtender in asp.net ajax
DragPanelExtender is an asp.net ajax control toolkit's extender control. DragPanelExtender control allow asp.net developers to add draggability to thier controls. DragPanelExtender control can be attached with asp.net Panel server control. DragPanelExtender control attached with an additional control to use as the drag handle.

DragPanelExtender control have the two important properties those are TargetControlID and DragHandleID. TargetControlID property specify the Panel server control which we want to make draggable. DragHandleID specify a control which will serve as the drag handle for the target Panel control. when user clicks and drags DragHandleID property specified control, the target Panel will move.

the following asp.net ajax example code demonstrate us how can we use DragPanelExtender to make a draggable panel. we can use the target Panel control as a container for other controls those we want to make draggable. in this example code we make an Image server control draggable by placing it inside draggable panel control. this is a simple tricks to make a control draggable in asp.net application. we can move any control in a web page by using DragPanelExtender control. here we uses a Label control as drag handle for draggable panel.
UsingDragPanelExtender.aspx
<%@ Page Language="C#" AutoEventWireup="true" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
    
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>Ajax DragPanelExtender - How to use DragPanelExtender in asp.net ajax</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <h2 style="color:DodgerBlue; font-style:italic;">Ajax Control Toolkit Example: Using DragPanelExtender</h2>
        <hr width="600" align="left" color="LightBlue" />
        <asp:ScriptManager 
            ID="ScriptManager1"
            runat="server"
            >
        </asp:ScriptManager>
        <cc1:DragPanelExtender 
            ID="DragPanelExtender1"
            runat="server"
            TargetControlID="Panel1"
            DragHandleID="Label1"
            >
        </cc1:DragPanelExtender>
        <asp:Panel 
            ID="Panel1"
            runat="server"
            BackColor="Snow"
            Width="250"
            HorizontalAlign="Center"
            >
            <asp:Label 
                ID="Label1"
                runat="server"
                Width="100%"
                BackColor="HotPink"
                Font-Bold="true"
                ForeColor="Snow"
                Text="Drag Me"
                >
            </asp:Label>
            <asp:Image 
                ID="Image1" 
                runat="server" 
                ImageUrl="~/Images/RedFlower.jpg"
                Height="275"
                BorderWidth="3"
                BorderColor="DeepPink"
                />
        </asp:Panel>
    </div>
    </form>
</body>
</html>
Related asp.net examples