How to use DragPanelExtender in asp.net ajax

DragPanelExtender

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>

<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>