asp.net 2.0+atlas write mouse drag and drop program

This article explores in detail the relationship between declarative programming and mandatory programming in Atlas and how to use it to implement drag-and-drop functionality on a Web client. The following figure shows the results snapshot for the corresponding sample program in this article.

Run results

I. INTRODUCTION

This article is intended to help readers understand how Microsoft's Atlas technology works in some aspects. The goal of Atlas is to simplify the development of AJAX-style Web applications. However, like all other technologies, in order to better use this tool, you need to have an in-depth understanding of the intrinsic technology of Atlas abstraction. A key to the Atlas abstraction is the new XML markup syntax, which is designed to make it easier to program with Atlas. With XML tags, developers can modify their code in a declarative manner. However, sometimes when a developer might want to change his code programmatically, he needs to understand that underneath the tag abstraction layer, he is actually dealing with JavaScript and some custom JavaScript libraries developed by Microsoft. To demonstrate the relationship between the Atlas declarative model and the programmable model, we'll discuss a few examples where we'll use two models to achieve the same functionality. I'll show you how to use the Atlasuidragdrop library file to perform basic drag-and-drop operations and set up a drop area.

Background

When I was writing this article, Atlas was still in its beta test phase and was continuing to modify it. These examples in this article apply to the April CTP version of Atlas, so an updated release of Atlas may affect the accuracy of this article. Also, be aware that Atlas works only with. NET 2.0.

Two. Declarative drag-and-drop

To add drag-and-drop behavior to a DIV tag, the first task is to use the Atlas tag. By dragging and dropping, I just want to implement the ability to drag and drop an object and make it where you want it to be placed. When an object is placed at a specified point, the action shown in the actual development is discussed later. To configure your Web page to use Atlas, you will need to download the Microsoft.Web.Atlas.dll files from the Microsoft site to your Bin folder and configure your Web.config files using the following portal:

＜system.web＞
＜pages＞
　＜controls＞
＜add namespace="Microsoft.Web.UI"
assembly="Microsoft.Web.Atlas" tagPrefix="atlas"/＞
＜add namespace="Microsoft.Web.UI.Controls"
assembly="Microsoft.Web.Atlas" tagPrefix="atlas"/＞
　＜/controls＞
＜/pages＞
＜/system.web＞

Next, you need to add an Atlas Script manager control to your. aspx page and use the Atlasuidragdrop Library to configure:

＜atlas:ScriptManager ID="ScriptManager1" runat="server"＞
　＜Scripts＞
＜atlas:ScriptReference ScriptName="AtlasUIDragDrop" /＞
　＜/Scripts＞
＜/atlas:ScriptManager＞

Then, add the div object you want to drag and make sure it has a drag-and-drop handle:

＜div style="background-color:Red;height:800px;width:600px;"＞
　＜div id="draggableDiv"
style="height:100px;width:100px;background-color:Blue;"＞
＜div id="handleBar"
style="height:20px;width:auto;background-color:Green;"＞
＜/div＞
　＜/div＞
＜/div＞

Finally, add the tag script that will make your div a drag-and-drop:

＜script type="text/xml-script"＞
＜page xmlns:script="http://schemas.microsoft.com/xml-script/2005"＞
　＜components＞
＜control id="draggableDiv"＞
　＜behaviors＞
＜floatingBehavior handle="handleBar"/＞
　＜/behaviors＞
＜/control＞
　＜/components＞
＜/page＞
＜/script＞

At this point you should have a div tag that you can drag and drop. This example shows the simplicity and ease of using declarative methods with Atlas. In the terminology introduced in Atlas, you only use declarative markup to add floating behavior to an HTML element.