Developing a Dice Game Using ASP.NET Futures Drag and Drop Techniques - MagicDropTargetBehavior
(Page 3 of 6 )
Next, let’s take a look at the second behavior—MagicDropTargetBehavior, which will be attached to the droppable area in the dice game. The following is the total source code for MagicDropTargetBehavior:
//constructor definition
Custom.UI.MagicDropTargetBehavior = function(element)
{
Custom.UI.MagicDropTargetBehavior.initializeBase(this, [element]);
//Note: the private variable _dragDropMagic is used to hold data carried by the draggable object.
//In fact, in this sample, this data matters little,
//readers can take further consideration, such as exhibit this data before users or send it back to the server side
this._dragDropMagic =new Custom.UI.DragDropMagic();
}
Custom.UI.MagicDropTargetBehavior.prototype =
{
// implement methods of the IDropTarget interface
get_dropTargetElement: function()
{
return this.get_element();
},
canDrop: function(dragMode, dataType, data)
{
//only the two conditions are met, can the draggable object be droppable
return (dataType == 'DragDropMagic' && data);
},
//do the factual dropping. Here, we use the data in the draggble object to alter the background color of the droppable area and show the dot number of the dice
drop: function(dragMode, dataType, data)
{
if (dataType == 'DragDropMagic' && data)
{
this.get_element().style.backgroundColor = data.backgroundColor;
this.get_element().innerHTML = data.number;
}
},
//invoke this method when the draggable object is within the droppable area
onDragEnterTarget: function(dragMode, dataType, data)
{
if (dataType == 'DragDropMagic' && data)
{
this._dragDropMagic =data;//store the data
//use the data to modify the background color of the droppable box and the dot number of the dice
this.get_element().style.backgroundColor = data.backgroundColor;
this.get_element().innerHTML = data.number;
}
},
onDragLeaveTarget: function(dragMode, dataType, data)
{
//restore the initial content
if (dataType == 'DragDropMagic' && data)
{
this.get_element().style.backgroundColor =this._dragDropMagic.backgroundColor;
this.get_element().innerHTML =this._dragDropMagic.number;
}
},
//unused, then empty
onDragInTarget: function(dragMode, dataType, data) {},
initialize: function()
{
Custom.UI.MagicDropTargetBehavior.callBaseMethod(this,'initialize');
Sys.Preview.UI.DragDropManager.registerDropTarget(this);
},
dispose: function()
{
Sys.Preview.UI.DragDropManager.unregisterDropTarget(this);
Custom.UI.MagicDropTargetBehavior.callBaseMethod(this,'dispose');
}
}
Custom.UI.MagicDropTargetBehavior.registerClass
('Custom.UI.MagicDropTargetBehavior', Sys.UI.Behavior,
Sys.Preview.UI.IDropTarget);
Since we have made enough comments between the lines, we don't need to waste space chattering. However, the last point readers should take notice of is that both in the initializeanddispose methods,the corresponding methods of DragDropManager are invoked.
Last but not least, please remember to call the notifyScriptLoaded() methodof Sys.Application at the end of thecustDragDrop.js fileto notify theASP.NET AJAXclient-side framework that this script has been loaded successfully:
if(typeof(Sys)!=='undefined')Sys.Application.notifyScriptLoaded();
Next, let’s start to consider the design of the web page for the dice game.
Next: HTML code-related programming >>
More ASP.NET Articles
More By Xianzhong Zhu
/ 10 
