Developing a Dice Game Using ASP.NET Futures Drag and Drop Techniques - HTML code-related programming

(Page 4 of 6 )

Open the CustDragDropDemo.aspx page. As with other typical ASP.NET AJAX web pages, at the nearest position neighboring <form> element, we can see the definition of the ASP.NET AJAX server control ScriptManager; within which, we should add all necessary references to the related script files. Here’s the corresponding code:

<asp:ScriptManager ID="ScriptManager1" runat="server">

<Scripts>

<asp:ScriptReference Assembly="Microsoft.Web.Preview"

Name="PreviewScript.js" />

<asp:ScriptReference Assembly="Microsoft.Web.Preview"

Name="PreviewDragDrop.js" />

<asp:ScriptReference Path="~/Scripts/custDragDrop.js" />

</Scripts>

</asp:ScriptManager>

As was shown before, in the custDragDrop.js file we defined two custom behaviors, MagicDragSourceBehavior and MagicDropTargetBehavior, and an important class, Custom.UI.DragDropMagic, which represents the factual data the draggable object carries.

Next, follow the relatedHTMLelement definitions and use someCSSstyles for a beautiful look. That’s all.

<fieldset style="width: 607px" >

<legend><span style="font-size: 12pt">Please select a dice</span></legend>

<table cellpadding="8">

<tr>

<!-- Drag sources -->

<td style="height: 80px">

<div id="DragSource1" class="magicBack" />

</td>

<td style="height: 80px">

<div id="DragSource12" class="magicBack" />

</td>

<td style="height: 80px">

<div id="DragSource3" class="magicBack" />

</td>

<td style="height: 80px">

<div id="DragSource4" class="magicBack" />

</td>

<td style="height: 80px">

<div id="DragSource5" class="magicBack" />

</td>

<td style="height: 80px">

<div id="DragSource6" class="magicBack" />

</td>

</tr>

</table>

</fieldset>

<div style="width: 67%; height:80px; margin: 5px;">

<input id="restartBtn" type="button" value="Restart the game" style="width: 90px; height: 34px" />

</div>

<fieldset style="width: 264px; height: 245px">

<legend><span style="font-size: 12pt">Drop the dice here</span></legend>

<!-- Drop target -->

<div id="DropTarget" class="divDropTarget">

?

</div>

</fieldset>

Note here that we have used <fieldset> elements to lay out the page. As for the CSS style definitions, you can refer to the source code.

Next, let’s pay attention to the ASP.NET AJAX client side specific declarative XML-Script programming.

Next: XML-Script programming >>
 

More ASP.NET Articles
More By Xianzhong Zhu

Comments On: Developing a Dice Game Using ASP.NET Futures Drag and Drop Techniques (code unedited)

>>> Be the FIRST to comment on this article!