Follow the easy steps below to create your solution.
1.
Start your Visual Studio 2005 IDE.
2.
Choose Create Web Site from the menu.
3.
In this sample application we will use the Visual Basic language for the
sample application.
4. Name
the solution DragPanelSample.
5.
Choose ASP.NET AJAX Control Toolkit Web Site.
6.
Choose File System in the location box.
7.
Click OK to create the project.
8.
Visual Studio 2005 will create your project with a Default.aspx
page and most likely a readme.txt. Go ahead and get rid of the latter file.
9.
Open Default.aspx page in design view.
10. You
noticed that there is a control on the page already called script manager.
(Well, AJAX is really a script based implementation of the language
JavaScript.) In Short, Script Manager Control manages client script for
Microsoft ASP.NET AJAX pages. By default, the Script Manager control registers the
script for the Microsoft AJAX Library with the page. This enables client script
to use the type system extensions and to support features such as partial-page
rendering and Web-service calls.
11. Create
a new item in the solution of type Style Sheet and leave the default name.
12. Listing
1 contains the style sheet content that should be placed inside the file. You
can copy and paste directly.
Listing 1 - Style Sheet Content
.dragContainer{
background-color: #FFC0FF;
height: 282px;
width: 357px;
border-bottom-color: black;
}
.dragHeader{
background-color: #8080FF;
height: 48px;
width: 358px;
}
.dragDetail{
background-color: #FFC0FF;
height: 213px;
width: 357px;
}13. Go
to the source mode, click and drop the style sheet file into the header section
of the default web form in order to be able to reference it.
14. Now
drag one panel from the standard Toolbox, go to source mode and change the ID
tag to PnlContainer, delete the height and width tags
and insert a cssclass tag with a value dragContainer as
selected from the style sheet like listing 2.
Listing 2 - Container Panel Format
<asp:Panel ID="PnlContainer" runat="server" cssclass="dragContainer">
15. Now,
drag two panels from the standard toolbox and drop them inside the container
panel.
16. Name
the first panel PnlHeader and delete the height and
width specs. Then create a CssClass tag with value dragHeader
like in Listing 3 and add the content specified.
Listing 3 - Header Panel Format and Content
<asp:Panel ID="PnlHeader" runat="server" CssClass="dragHeader">
Click and Drag Here To Move ME.....around the page</asp:Panel>
17. Name
the second panel PnlDetail and delete the height and
width specs. Create a CssClass tag with value dragDetail
like in listing 4.
Listing 4 - Detail Panel Format and Content
<asp:Panel ID="PnlDetail" runat="server" CssClass="dragDetail">
Here is just some content where you can add as much text as you like<br />
line 1<br />
line 2<br />
Remmeber that you can add any html text here<br /><br />
</asp:Panel>
18. Place
the cursor after the script manager html end tag. From the Toolbox of the Toolkit
drag a DragPanel control and set the properties as specified in Listing 5.
Listing 5 - DragPanel Extender Format
<ajaxToolkit:DragPanelExtender ID="DragPanelExtender1" runat="server"
TargetControlID="PnlContainer" DragHandleID="PnlHeader">
</ajaxToolkit:DragPanelExtender>
19. Please
note that some of these properties cannot be specified using the normal
properties window.
20. The
target control ID specifies the control to drag and move (the container panel
in our case).
21. The
drag handle specifies the control that the user is able to click and drag from (the
header panel in our case).
22. All
tasks performed so far allow you to move the panel around without fixing it in
place. You can try this by running your code and testing the panel.
23. In
order to be able to fix the panel on the web page and stay where you have
dropped, you have to add the JavaScript listed in Listing 6 before the end of
the body tag or in the header tag.
Listing 6 - JavaScript used to position the DragPanel
<script type="text/javascript">
function setBodyHeightToContentHeight()
{
document.body.style.height = Math.max(document.documentElement.scrollHeight,
document.body.scrollHeight)+"px";
}
setBodyHeightToContentHeight();
</script> 
