Home » Add Drag-and-Drop Magic to Your Web Pages Using Microsoft AJAX Library

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

ne of the coolest features you can add to your Web application is the ability for users to personalize the look-and-feel of the pages all on their own. And often, users like to rearrange parts of the page to suit their own viewing preferences. Imagine going to a Web site and being able to pick up sections, images, text, and other page “widgets” and move them around dynamically. With AJAX technologies such as Atlas, this functionality is available today.

Of course, in ASP.NET 2.0, you can build something very similar using the WebParts framework. However, if you want a simpler way to incorporate WebParts-like features in your pages, Atlas has a solution.

In this article, I will show you how to make pieces of your Web page “moveable”; users will be able to reposition various parts of the page using basic drag and drop. Best of all, the page can be personalized and saved for each user, using the Profile service in ASP.NET 2.0.

Building the Application
Using Visual Studio 2005, create a new Atlas application and name it C:DragandDrop. Switch to the code-behind of the default.aspx page.

First, set the EnablePartialRendering attribute of the control to “true” so that your page can support partial updating:

    EnablePartialRendering="true" />

Next, add an control to the page and within it, add the element. Add a Panel control to the element and set its border style and dimensions as shown below:

Now that you have a Panel control embedded within a control, you will add some content in the Panel control. You can either add some text or you can add another control such as the Calendar, ImageMap, etc. For this example, I am going to add a clock to display the time in a selected time zone. ClockLink.com provides a number of fashionable clocks that you can easily embed in your web page. These clocks update themselves (every second) on the client side of the page without causing a page reload. You will add a clock that displays the time in New Zealand. To embed this clock, simply insert the scripts that are highlighted below in bold:

                                                  Current Time in New Zealand

At this juncture, you can see how the page will look like by pressing F5. Figure 1 shows the clock displayed within a Panel control.

Figure 1. The screen shot shows the Default.aspx page with a clock that updates every second on the client side.

Figure 2. The screen shot shows the same clock after I moved it to a new spot on the page and dropped it.

Stop the application and let’s now make the Panel control containing the clock moveable. You will use the control for this purpose. The control extends a control by transforming it into a floating control. You can drag and drop the control anywhere on the Web page.

Add the control and configure it by adding an control and setting its TargetControlID attribute to “Panel1.” Also remember to set its Enabled property to “true”:

Press F5 to test the application. You should now be able to drag the clock around the page. However, you will notice that when you release the mouse, the clock will always return to its original location. This will happen because you cannot drop the control beyond what is rendered on the page and your page is empty except for the Panel control. You can fix this problem simply by adding the following attributes in bold to the element of the page:

style="height: 100%;">

Press F5 to test the application again. You should now be able to drag the clock and drop it anywhere on the page so long as you are still within the Panel control (see Figure 2).

Personalizing the Page
Now that you are able to drag and drop a control on a page, you will realize that when the application is restarted, the control is back to its original location. In the real world, users want the application to remember the settings of the page. For this, we need to use the Profile service in ASP.NET 2.0.

To use the Profile service in ASP.NET 2.0, you need to do a few things. First, add a Profile property to the application by adding the following to Web.config:

Next, you need to uncomment the element in Web.config so that Atlas is now able to use the Profile service on the server-side. Set its attributes as shown below:

                        setProperties="Panel1Loc"                     getProperties="Panel1Loc" />

Basically, you are telling Atlas that you want to be able to read and write to the Profile property named Panel1Loc.

Next, add the ProfileProperty attribute to the control and set it to “Panel1Loc.” This will allow it to save the position of the Panel control that it is extending to the Profile property named Panel1Loc:

                             ProfileProperty="Panel1Loc" />

Finally, add the control and set its AutoSave attribute to “true.” This will cause the position of the Panel control to be saved automatically to the Profile property whenever it is dragged and dropped:

Figure 3. ASPNETDB.MDF is the database that holds the data about the position of elements on your page.

Figure 4. The row containing the values of the Profile property is shown.

That’s it! Press F5 to test the application. Drag and drop the clock on a new position. Stop the application and run it again and you will see that the clock will now go back to the position where you left it.

Examining the Database
To verify that the positional information of the clock is indeed persisted, refresh the App_Data folder in your project (see Figure 3). You should see the newly created ASPNETDB.MDF database. This database is used by ASP.NET to save application-related data.

Double-click on the ASPNETDB.MDF file. In Server Explorer, expand the Tables item and right-click on the aspnet_Profile table and select Show Table Data. The first row of the table shows the values of the Profile property (see Figure 4).

Author’s Note: In my example, I am using the default Windows authentication and hence my Windows login will be used as the user name (stored separately in the aspnet_Users table). The Profile service also works with Forms authentication and works for authenticated as well as anonymous users.

Adding More Panels


Figure 5. Dragging and dropping two Panel controls.

So far, you have only seen one Panel control in action. I will now add one more Panel control to display the current time in Japan. Here are the additions/changes.

Add a new control (UpdatePanel2) containing another Panel control (Panel2) to the page (the clock now displays the time in Japan):

                                               ...                   ...                                                                              Current Time in Japan

Add a new control to the to extend the second Panel control:

In Web.config, add another Profile property named Panel2Loc:

Finally, modify the setProperties and getProperties attributes to include the Panel2Loc Profile property:

                         getProperties="Panel1Loc;Panel2Loc" />

Press F5 to test the application. You can now drag and drop the two clocks and they will remain in the same position even f you reload the page (see Figure 5).

Alternative Drag and Drop Using the DragPanel Control
Besides using the 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 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:

                                                    Drag Me

Basically, in the code above you have:

An control
Two Panels controls (Panel2 and Panel3) embedded within a third Panel control (Panel1).
Panel2 contains a
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:

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 {    width:100%;    height:21px;    background-color:#FFF;    text-align:center;    cursor:move;    font-weight:bold;}

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

    Untitled Page

To ensure that when the mouse moves over the “Drag Me” Panel, set the class attribute of the

element as follows:

                            class="dragIcon" style="text-align: center">                    Drag Me

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

About Our Editorial Process

At DevX, we’re dedicated to tech entrepreneurship. Our team closely follows industry shifts, new products, AI breakthroughs, technology trends, and funding announcements. Articles undergo thorough editing to ensure accuracy and clarity, reflecting DevX’s style and supporting entrepreneurs in the tech sphere.

See our full editorial policy.