Browse DevX
Sign up for e-mail newsletters from DevX


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

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




Building the Right Environment to Support AI, Machine Learning and Deep Learning

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 <atlas:ScriptManager> control to "true" so that your page can support partial updating:

<atlas:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true" />

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

<atlas:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true" /> <div> <atlas:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:Panel ID="Panel1" runat="server" BorderStyle="Solid" Height="198px" Width="194px"> </asp:Panel> </ContentTemplate> </atlas:UpdatePanel>

Now that you have a Panel control embedded within a <atlas:UpdatePanel> 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:

<atlas:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:Panel ID="Panel1" runat="server" BorderStyle="Solid" Height="198px" Width="194px"> <script rc="http://www.clocklink.com/embed.js"> </script> <strong>Current Time in New Zealand</strong> <script type="text/javascript" language="JavaScript"> obj = new Object; obj.clockfile = "0010-Red.swf"; obj.TimeZone = "NZT"; obj.width = 200; obj.height = 200; obj.wmode = "transparent"; showClock(obj); </script> </asp:Panel> </ContentTemplate> </atlas:UpdatePanel>

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 <atlas:DragOverlayExtender> control for this purpose. The <atlas:DragOverlayExtender> 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 <atlas:DragOverlayExtender> control and configure it by adding an <atlas:DragOverlayProperties> control and setting its TargetControlID attribute to "Panel1." Also remember to set its Enabled property to "true":

<atlas:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true" /> <atlas:DragOverlayExtender ID="DragOverlayExtender1" runat="server"> <atlas:DragOverlayProperties TargetControlID="Panel1" Enabled="true"/> </atlas:DragOverlayExtender>

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 <body> element of the page:

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

Thanks for your registration, follow us on our social networks to keep up-to-date