RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


Add Drag-and-Drop Magic to Your Web Pages Using Microsoft AJAX Library : Page 3

Sometimes it seems like AJAX is a layer of magic for web pages. The ability to drag and drop page "widgets" such as images and chunks of text is definitely one of those features that makes people's eyes light up. Find out how easy it is to enable client-side drag-and-drop using Microsoft AJAX Library (Atlas).

Alternative Drag and Drop Using the DragPanel Control
Besides using the <atlas:DragOverlayExtender> control for drag and drop operation on Web pages, you can also use the DragPanelExtender control which is contained in the Atlas Control Toolkit. Basically, the DragPanelExtender control is very similar to the <atlas:DragOverlayExtender> control, except that it does not have built-in capability to persist the positional information of controls that have been dragged.

To see how the DragPanelExtender control works, add a new Web Form to the page (Default2.aspx). Switch to the code-behind of the form and code the form as shown:

        <atlas:ScriptManager ID="ScriptManager1" runat="server">

        <asp:Panel ID="Panel1" runat="server" Width="125px" 
            <asp:Panel ID="Panel2" runat="server" Height="1px" 
               Width="100%" BorderStyle="Double"
                <div style="text-align: center">Drag Me</div>
                <asp:Panel ID="Panel3" runat="server" 
                   Height="50px" Width="125px">
                    <asp:Image ID="Image1" runat="server" 
                       Height="318px" Width="475px"
                       ImageUrl="~/Fish.jpg" />
Basically, in the code above you have:
  • An <atlas:ScriptManager> control
  • Two Panels controls (Panel2 and Panel3) embedded within a third Panel control (Panel1).
  • Panel2 contains a <div> element, which contains a string: "Drag Me."
  • Panel3 contains an image—Fish.jpg (you need to add the image to the project)
The DragPanelExtender control allows you to specify which Panel control should allow for dragging (in this case, Panel2) and the corresponding Panel control that should be moved (in this case, Panel1). Hence, add the following to the page:

        <cc1:DragPanelExtender ID="DragPanelExtender1" runat="server">
               TargetControlID="Panel1" />
Here, users will be able to drag Panel2 and the corresponding Panel1 will move with it. That's it! Press F5 to test the application. You will now be able to move the Panel containing the image by just dragging the Panel containing the string: "Drag Me" (see Figure 6).

Figure 6. Using the DragPanelExtender control you can make it more obvious to your users that panels are moveable by nesting panels inside of one another.
Figure 7. You should change the cursor to "move" so the user gets a visual cue that the panel is moveable.

Changing into a Drag Icon
If you are observant, you will realize that when the mouse hovers over the "Drag Me" Panel, the cursor does not change into a "move" cursor (which is a four-pointed arrows icon). This is not a good UI design, as it does not convey information to hint to the user that this is a moveable Panel. To do so, you need add a cascading stylesheet (CSS).

Add a CSS stylesheet to the project (right-click on project name in Solution Explorer and then select Add New Item…, and select Style Sheet). Use the default name of StyleSheet.css. Populate the stylesheet with the following:

.dragIcon {
Back in the Source View of Default2.aspx, link to the newly added stylesheet by adding the element highlighted in bold:

<head runat="server">
    <title>Untitled Page</title>
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" /> 
To ensure that when the mouse moves over the "Drag Me" Panel, set the class attribute of the <div> element as follows:

            <asp:Panel ID="Panel2" runat="server" Height="1px" 
               Width="100%" BorderStyle="Double"
                <div class="dragIcon" style="text-align: center">
                    Drag Me</div>
Press F5 to test the application again. When your mouse now hovers over the "Drag Me" panel, it will change to the "move" cursor (see Figure 7).

In this article, you have seen how you can easily implement drag and drop functionality on your Web page using Atlas. Besides extending Panel controls, the <atlas:DragOverlayExtender> control can also be used to extend other Web server controls. Alternatively, you can also use the DragPanelExtender control from the Atlas Control Toolkit to make Panel controls moveable. Finally, you learned how to change the default cursor of a moveable control to the "move" cursor so that it gives the appropriate visual cues to users.

Wei-Meng Lee is a Microsoft MVP and founder of Developer Learning Solutions, a technology company specializing in hands-on training on the latest Microsoft technologies. He is an established developer and trainer specializing in .NET and wireless technologies. Wei-Meng speaks regularly at international conferences and has authored and coauthored numerous books on .NET, XML, and wireless technologies. He writes extensively on topics ranging from .NET to Mac OS X. He is also the author of the .NET Compact Framework Pocket Guide, ASP.NET 2.0: A Developer's Notebook (both from O'Reilly Media, Inc.), and Programming Sudoku (Apress). Here is Wei-Meng's blog.
Email AuthorEmail Author
Close Icon
Thanks for your registration, follow us on our social networks to keep up-to-date