Developing a Dice Game Using ASP.NET Futures Drag and Drop Techniques (Page 1 of 6 )
Nowadays, with Ajax being used by more and more web applications, drag & drop support to some degree becomes the magic weapon for various heavyweight Ajax frameworks. As one of the famous Ajax solutions, Microsoft ASP.NET AJAX has not declined to shoulder responsibility and put forward its own server-side and client-side drag & drop solutions. However, in this article, we’ll focus on ASP.NET AJAX client-side drag & drop programming with the development of a simple dice game.
Drag & drop is the tremendous improvement within the desktop applications area that has vastly increased software application efficiency. However, it is a pity that JavaScript itself does not provide built-in support for the mouse drag & drop operation. Later, with the introduction of DHTML techniques various, browsers started to bring forward their own drag & drop solutions. To eliminate the differences between the solutions provided by various browsers, multifarious JavaScript libraries turned out, whose goals are nearly all the same: providing a cross-browser compatible solution and simplifying drag & drop programming.
Author's Note: To follow along with the dice game development in this article, you're assumed to have installed Visual Studio 2005 and at least the two components of ASP.NET AJAX, which are ASP.NET 2.0 AJAX Extensions and ASP.NET Futures July 2007. In addition, it is highly advisable that you download the source files accompanying this article.
Drag & drop support by ASP.NET Futures
In this section, we’ll first explore the inner workings of cross-browser drag & drop client-side support byASP.NET Futures. To achieve a drag & drop operation, we should take into consideration three factors:
—Draggable items - DOM elements that can be moved around the page, while drop targets are elements that act as "containers" for draggable items. The MS AJAX framework allows us to define draggable elements by implementing theIDragSource interface.
—Drop targets - a class that implements theIDropTargetinterface. In fact, we can also create a class that implements both theIDragSourceandIDropTargetinterfaces.
—DragDropManager - a global object that is instantiated at runtime and is generally used to launch dragging operations and to register drop targets. As you may have doped out, the DragDropManager serves as the headquarters for the whole drag & drop operation by invoking the corresponding methods of the interfaces IDragSource and IDropTarget.
Thus, we can take the following steps to create a drag & drop UI:
—Create draggable items by implementing the IDragSource interface. The class that implements this interface is also responsible for calling the Web.UI.DragDropManager.startDragDrop() method in order to start the dragging operation (typically, this is done via an event handler for the mousedown event of the control's element). Each draggable item has its owndataType, which is an identifier that allows you to group draggable items (the predefined dataType isHTML).
—Create drop targets by implementing the IDropTarget interface. A class that implements this interface is responsible for registering the drop target by invoking the Web.UI.DragDropManager.registerDropTarget() method. Each drop target has a list of accepted DataTypes that specify what "types" of draggable items can be dropped on that target.
Author's Note: Within the file PreviewDragDrop.js, which is shipped with ASP.NET Futures, there are only a pair of built-in behaviors (i.e. DragDropList and DraggableListItem) that support the drag & drop operation. Therefore, to gain a more intensive comprehension of the IdragSource, IdropTarget, and DragDropManager interfaces, as well as the relations between them, the recommended approach is to further study the source code of the DragDropList and DraggableListItem behaviors in the PreviewDragDrop.js file. Once you have grasped the main ideas of the two behaviors, you are sure to reach the summit of ASP.NET AJAX-related drag & drop programming.
Now, let’s concentrate on the main idea of this article, which is developing a dice game with drag & drop support.
Let’s first take a quick look at the final result we hope to achieve.
Visualizing the finish line
In the dice game, we are to create two custom behaviors that are inherited from the IDragSource and IDropTarget interfaces respectively, and perform drag & drop operations at the proper times with the help of the DragDropManager object.Figure1shows theinitialrun-time snapshot of thedice game (CustDragDropDemo.aspx). Here theplayercandrag one of the six dice at the top onto the lower-bottom box with a question mark in it. The question mark will then be replaced with the number of dots the player picks. Of course, as a rule, the six die at the top should be positioned at random with the dot number ranging from one to six.
Figure 1—the initial run-time snapshot of the dice game
Figure2showsone of therun-time snapshots of thedice game, where the player has selected a die with five dots.When the player clicks ‘Restart the game,’ the box at the lower bottom again displays a question mark and the six numbers (1~6) have also been repositioned randomly under the six small boxes with the back covers being the same pattern.
This kind of game is pretty simple in desktop application scenarios. However, in web areas, it is still difficult to tackle, mainly because of the incompatibility between browsers. Next let's dig into the how-to solutions.
Create an ASP.NET AJAX CTP-Enabled Web Site
Launch Visual Studio 2005 and then select the "File | New Website…" menu item to create a new website using the template named "ASP.NET AJAX CTP-Enabled Web Site." Name the projectClientDragDropTest (select Visual C# as the built-in language). After that, the system should automatically add references to the necessary assemblies—Microsoft.Web.Preview.dll and System.Web.Extensions.dll (you cannot see it, since it’s put into .NET GAC). And also, you can see aScriptManagerserver control automatically added to the Default.aspx page. Simply put, this server control acts as the control center for the entire ASP.NET AJAX framework. Finally, rename the Default.aspx file to CustDragDropDemo.aspx.
Next, let’s delve into how to construct the two client-side behaviors that we will utilize in this game.
Next: Defining the two behaviors: MagicDragSourceBehavior and MagicDropTargetBehavior >>
More ASP.NET Articles
More By Xianzhong Zhu
/ 7 
