Use the Atlas library to add mouse drag-and-drop functionality to Web pages

web| Mouse | page

　　 SummarySometimes Ajax seems to add a mysterious tinge to the Web page. If a page can support drag-and-drop operations on small pieces (such as images and blocks of text), it will obviously brighten the visitor's eyes. In this article, you will see that using Microsoft Atlas you will also be able to implement similar mouse drag-and-drop functions on the client side very easily.

　　 first, the introduction

You can add a pretty cool feature to your Web application: Enable users to customize the look and feel of their own pages. And, often, users like to rearrange the page sections to fit their own viewing habits. Let's imagine a scenario where a user navigates to a site, can select a portion of it (such as images, text, and other pieces of the page), and can move them dynamically. Today, thanks to Ajax technologies such as Atlas, we can easily implement such a feature.

Of course, in asp.net 2.0, you can also use the webparts framework to build features that are very similar to this one. However, if you want to use a simpler way to add features like WebParts to your page, Atlas offers you a solution.

In this article, I'll show you how to make your Web page part "removable"; users will be able to reposition parts of the page using basic mouse drag-and-drop operations. In particular, we can personalize the page with the profile service provided by ASP.net 2.0 and save the appropriate customization information for each user.

　　 second, build the application

Create a new Atlas application using Visual Studio 2005 and name it "C:\DragandDrop". Then, switch to the Code-behind section of the Default.aspx page.

First, set the <atlas:ScriptManager> control's EnablePartialRendering property to "true" so that your page can support some of the page update features:

<atlas:scriptmanager id= "ScriptManager1" runat= "Server" enablepartialrendering= "true"/>
Next, you add a <atlas:UpdatePanel> control to the page and add the <ContentTemplate> element inside it. After that, you add a panel control to the <ContentTemplate> element and set its border style and size 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've embedded a panel control in a <atlas:UpdatePanel> control, then you need to add some content to the Panel control. To do this, you can either add some text or add another control, such as Calendar, ImageMap, and so on. In this example, I want to add a clock to show the time of a selected timezone. Note that many stylish clocks are available at the site clocklink.com, and you can easily embed them in your Web page. These clocks can update themselves every second of the client page without causing a page overload. Here you will add a clock showing the New Jersey time. To embed this clock, you simply insert the following script highlighted 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 point, you can see the style of the page just by pressing the F5 key. Figure 1 shows the situation in which the clock is displayed in a Panel control.

Figure 1. This screenshot shows the Default.aspx page, in which the clock updates every second of the time.

Stop running the application. Now, let's add some functionality to make the top panel control contain a removable clock. You will use the <atlas:DragOverlayExtender> control to achieve this goal. In fact, this <atlas:DragOverlayExtender> control inherits from another control and further transforms it into a drag-and-drop control. Eventually, you can drag and drop the control on the Web page.

Now, add a <atlas:DragOverlayExtender> control and configure it-add a <atlas:DragOverlayProperties> control and set its TargetControlID property to " Panel1 ". Also remember: 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 the F5 key again to test the application. Now, you should be able to drag this clock on the page. However, you will notice that when you release the mouse, the clock will always return to its original position. This occurs because you cannot drag the control onto other controls generated on the page and your page is blank except for this Panel control. To do this, you can correct this problem by simply adding the following properties to the page's <body> element:

<body style= "height:100%;" >
Press F5 to test the application again. Now you should be able to drag the clock and drag it to any location on the page as long as you are still within the Panel control (see Figure 2).

Figure 2. This screenshot shows the same clock as Figure 1, except that I dragged it to a new location with my mouse.

　　 third, personalized page

Now that you've been able to drag and drop a control on a page, you should realize that when the application restarts, the control reverts to its original location. In practice, users often require the application to remember the page's settings. To do this, we need to use the profile service provided by ASP.net 2.0.

In order to use the profile service provided by ASP.net 2.0, you need to do some preparation work. First, add a profile property to your application by adding the following to the web.config:

<system.web>
<profile>
<properties>
<add name= "Panel1loc" type= "System.String"
</properties>
</profile>
Then you need to remove the comment in the web.config <profileService> element, so that Atlas can now use server-side profile services. Then, set its properties as shown below:

<profileservice enabled= "true" setproperties= "Panel1loc" getproperties= "Panel1loc"/>
Basically, you're telling Atlas that you want to read and write the profile property of the name Panel1loc.

Then, add the ProfileProperty property to the <atlas:DragOVerlayProperties> control and set it to "Panel1loc". This allows it to save the position of the Panel control, which extends to the profile attribute named Panel1loc that was just added:

<atlas:dragoverlayextender id= "DragOverlayExtender1" runat= "Server"
<atlas:dragoverlayproperties targetcontrolid= "Panel1" enabled= "true" profileproperty= "Panel1loc"/>
</atlas:DragOverlayExtender>
Finally, add the <atlas:ProfileScriptService> control and set its AutoSave property to True. This causes the position data of the Panel control to be automatically saved to the profile property-whenever you drag it:

<atlas:scriptmanager id= "ScriptManager1" runat= "Server" enablepartialrendering= "true"/>
<atlas:profilescriptservice id= "ProfileScriptService1" runat= "Server" autosave= "true"/>
Now, press F5 again to test the application and try to drag the clock to a new location. Stop the application and run it again; As a result, you will see that the clock is now back to its original position.

　　 iv. Analysis of Databases

To verify that the position information of the clock is really stored, you can refresh the App_Data folder under your project (see Figure 3), at which point you should be able to see the newly created Aspnetdb.mdf database. This database is used by ASP.net to hold application-related data.

Figure 3. ASPNETDB. MDF is the database that stores the location data for the elements in your page.

Double-click the Aspnetdb.mdf file. Then, in Server Explorer, expand the Tables item, right-click the Aspnet_profile table, and select Show Table Data. The first row of the table shows the value of the profile property (see Figure 4).

Figure 4. The above line contains the value of the profile property being displayed.

Author note In this example, I used the default Windows authentication method; Therefore, my Windows login will be the user name (stored separately in the Aspnet_users table). Note that the Profile service can also work in form authentication and can also be authenticated for anonymous users.

　　 Five, add more panels

So far, you've only seen one panel control. Now, I'm going to add another panel control to show the current Japanese time.

First, let's add a new <atlas:UpdatePanel> control (UPDATEPANEL2) containing another panel control (PANEL2) to the page (now the clock shows Japanese time).

<atlas:updatepanel id= "UpdatePanel1" runat= "Server"
<ContentTemplate>
...
...
</ContentTemplate>
</atlas:UpdatePanel>
<atlas:updatepanel id= "UpdatePanel2" runat= "Server"
<ContentTemplate>
<asp:panel id= "Panel2" runat= "Server" borderstyle= "Solid" height= "198px" width= "194px"
<script src= "Http://www.clocklink.com/embed.js"
</script>
<strong> current time in Japan </strong>

<script type= "Text/javascript" language= "JavaScript"
obj = new Object;
Obj.clockfile = "0008-yellow.swf";
Obj. TimeZone = "JST";
Obj.width = 200;
Obj.height = 200;
Obj.wmode = "Transparent";
Showclock (obj);
</script>
</asp:Panel>
</ContentTemplate>
</atlas:UpdatePanel>
Then, add a new <atlas:DragOverlayProperties> control to <atlas:DragOverlayExtender> to extend the second Panel control:

<atlas:dragoverlayextender id= "DragOverlayExtender1" runat= "Server"
<atlas:dragoverlayproperties targetcontrolid= "Panel1" enabled= "true" profileproperty= "Panel1loc"/>
<atlas:dragoverlayproperties targetcontrolid= "Panel2" enabled= "true" profileproperty= "Panel2loc"/>
</atlas:DragOverlayExtender>
In the Web.config file, add another profile property named Panel2loc:

<profile>
<properties>
<add name= "Panel1loc" type= "System.String"
<add name= "Panel2loc" type= "System.String"
</properties>
</profile>
Finally, modify the SetProperties and GetProperties properties to include the Panel2loc profile property:

<profileservice enabled= "true"
Setproperties= "PANEL1LOC; Panel2loc "
Getproperties= "PANEL1LOC; Panel2loc "/>
Press F5 to test the application. Now you can drag and drop both clocks, and even if you overload the pages, they will remain in the same position (refer to Figure 5).

Figure 5. Drag and drop two panel controls.

　　 Vi. using the Dragpanel control to implement optional drag-and-drop

In addition to using the <atlas:DragOverlayExtender> control to implement a drag-and-drop operation on a Web page, you can also use Dragpanelextender controls contained in the Atlas Control Toolkit. Basically, this dragpanelextender control is very similar to the <atlas:DragOverlayExtender> control, except that it has no built-in ability to store information about the location of the dragged control.

To actually see how the Dragpanelextender control works, let's add a new Web Form to the page (default2.aspx). Then, switch to the code-behind of the form and modify the source code for the form as shown below:

<atlas:scriptmanager id= "ScriptManager1" runat= "Server"
</atlas:ScriptManager>
<asp:panel id= "Panel1" runat= "Server" width= "125px" borderstyle= "Double"
<asp:panel id= "Panel2" runat= "Server" height= "1px" width= "100%" borderstyle= "Double" backcolor= "white"
<div style= "Text-align:center" >drag Me </div>
</asp:Panel>
<center>
<asp:panel id= "Panel3" runat= "Server" height= "50px" width= "125px"
<asp:image id= "Image1" runat= "Server" height= "318px" width= "475px" imageurl= "~/fish.jpg"/>
</asp:Panel>
</center>
</asp:Panel>
Basically, in the code above, you've implemented:

· A <atlas:ScriptManager> control.

· Two panel controls (Panel2 and PANEL3) are embedded in the third Panel control (PANEL1).

· Panel2 contains a <div> element that contains a string "Drag Me."

· The 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 be allowed to drag (here, be Panel2) and the corresponding Panel control that should be moved (this is Panel1). To do this, add the following fragment to the page:

<cc1:dragpanelextender id= "DragPanelExtender1" runat= "Server"
<cc1:dragpanelproperties
Draghandleid= "Panel2"
Targetcontrolid= "Panel1"/>
</cc1:DragPanelExtender>
Now, the user can drag the Panel2, and the corresponding Panel1 will move along with it. Now, press F5 to test the application. Now, by dragging the panel containing the string "Drag Me", you can move the panel that contains the image (see Figure 6).

Figure 6. With this Dragpanelextender control, your users will be more intuitive to realize that the panel is removable.

　　 Seven, change to a drag icon

If you're good at observing, you'll notice that when the mouse stops on the "Drag Me" panel, the cursor doesn't change to a "move" cursor (it's a four-directional arrow icon). So, to be honest, this is a good UI design, because it doesn't convey to the user exactly "this is a removable panel" message. To do this, you need to add a cascading style sheet (CSS).

Now, add a CSS model sheet to the project (right-click the project name from Solution Explorer and select "Add New Item ..." and select "Style Sheet"). Here, we use the default name: Stylesheet.css. Then, populate the Model table with the following content:

. DragIcon {
width:100%;
height:21px;
Background-color: #FFF;
Text-align:center;
Cursor:move;
Font-weight:bold;
}
Now let's go back to the source view of the default2.aspx file by adding the highlighted element below to link to the newly added stylesheet:

<title> Untitled Page </title>
<link href= "Stylesheet.css" rel= "StyleSheet" type= "text/css"/>
To make sure that the mouse moves on the Drag Me panel, set the <div> element's class attribute as follows:

<asp:panel id= "Panel2" runat= "Server" height= "1px" width= "100%" borderstyle= "Double" backcolor= "white"
<div class= "DragIcon" style= "Text-align:center"
Drag Me </div>
</asp:Panel>
Press F5 to test the application again. Now, when you move the mouse over the "Drag Me" panel, it changes to the "move" cursor shape (see Figure 7).

Figure 7. Change the cursor to a "move" type so that the user can get a more intuitive visual effect from the removable panel.

　　 Viii. Summary

With this article, you learned how to use Atlas to easily implement drag-and-drop functionality on your Web pages. In addition to being able to extend the Panel control, the <atlas:DragOverlayExtender> control can also be used to extend other Web server controls. As a choice, you can also use the Dragpanelextender control from the Atlas Control Toolkit so that the panel controls can move. Finally, you learned how to change the default cursor of a removable control to a "move" cursor to convey a more visual effect to the user.