Developing a Dice Game Using ASP.NET Futures Drag and Drop Techniques - Defining the two behaviors: MagicDragSourceBehavior and MagicDropTargetBehavior

(Page 2 of 6 )

Obviously, the six dice represent the drag sources. Therefore, we can define a custom behavior named MagicDragSourceBehavior. By attaching this behavior to the six client-side controls that are associated with the six dice, we can make the six die-related DOM elements draggable.

For analysis, we list the source code of MagicDragSourceBehavior, which is shown below:

Type.registerNamespace('Custom.UI');

Custom.UI.MagicDragSourceBehavior = function(element)

{

Custom.UI.MagicDragSourceBehavior.initializeBase(this, [element]);

//defined the mousedown event listener

this._mouseDownHandler = Function.createDelegate(this,

this.mouseDownHandler);

this._dragDropMagic=null;

this._visual = null;

}

Custom.UI.MagicDragSourceBehavior.prototype =

{

get_dragDropMagic: function()

{

return this._dragDropMagic;

},

set_dragDropMagic: function(dragDropMagic)

{

this._dragDropMagic = dragDropMagic;

},

//get the data type of the draggable object

//here we specify the data type must be DragDropMagic

get_dragDataType: function()

{

return 'DragDropMagic';

},

//get the data that is held in the draggable object

getDragData: function(context)

{

return this._dragDropMagic;

},

//specify the drag mode to be ‘Copy’

get_dragMode: function()

{

return Sys.Preview.UI.DragMode.Copy;

},

onDragStart: function() {},

onDrag: function() {},

// onDragEnd is called at the end of the drag & drop operation

// Here, delete the semitransparent object that shows

// the process of dragging and reconstruct it when needed

onDragEnd: function(canceled)

{

if (this._visual)

this.get_element().parentNode.removeChild(this._visual);

},

initialize: function()

{

Custom.UI.MagicDragSourceBehavior.callBaseMethod(this,'initialize');

$addHandler(this.get_element(), 'mousedown',this._mouseDownHandler)

 

},

//mousedown event handler

//Note the following code is quite similar to that used inside the onDragEnd method of the DragDropList behavior

mouseDownHandler: function(ev)

{

window._event = ev; //DragDropManager needs this

this._visual = this.get_element().cloneNode(true);

this._visual.style.opacity = '0.4';

this._visual.style.filter =

'progid:DXImageTransform.Microsoft.BasicImage(opacity=0.4)';

this._visual.style.zIndex = 99999;

this.get_element().parentNode.appendChild(this._visual);

var location =Sys.UI.DomElement.getLocation(this.get_element());

Sys.UI.DomElement.setLocation(this._visual, location.x,location.y);

Sys.Preview.UI.DragDropManager.startDragDrop(this,this._visual, null);

},

dispose: function()

{

if (this._mouseDownHandler)

$removeHandler(this.get_element(), 'mousedown',this._mouseDownHandler);

this._mouseDownHandler = null;

Custom.UI.MagicDragSourceBehavior.callBaseMethod(this, 'dispose');

}

}

//define the descriptor block so as to be used in xml-script programming

Custom.UI.MagicDragSourceBehavior.descriptor = {

properties: [

{name: 'dragDropMagic', type: Custom.UI.DragDropMagic}

]

}

Custom.UI.MagicDragSourceBehavior.registerClass

('Custom.UI.MagicDragSourceBehavior', Sys.UI.Behavior,

Sys.Preview.UI.IDragSource);

As for MagicDragSourceBehavior, the following points deserve to be mentioned:

1. This behavior is defined within the Custom.UI namespace.

2. The private variable _visual serves the same role as the private variable _dragVisual and is defined within the DragDropList behavior. These are all used to create a semitransparent element that indicates the drag & drop process.

3. The dragDropMagic propertyis very important. It corresponds to thedata propertyused inside the DragDropList behavior. In this sample, this property is used to store our custom object—Custom.UI.DragDropMagic (for brevity, we have not listed its source code; you can refer to the downloadable source code of the article), which defines two properties:backgroundColorandnumber. These represent the background color of the drop area and the dot number that is shown. Please note the relationship between this property and the data within MagicDropTargetBehavior. It will be defined later.

4. As for the methods declared in IDragSource, here we have defined them with those unused in this empty sample.

5. At the end of the event handler, mouseDownHandler, the following method is invoked:

Sys.Preview.UI.DragDropManager.startDragDrop(this,this._visual, null);

This method is responsible for notifying DragDropManager that the drag & drop operation has already started.

6. To use MagicDragSourceBehavior inside the declarative XML-Script blocks, we have also defined its descriptor with only adragDropMagic propertyexposed (as is explained above).

Next: MagicDropTargetBehavior >>
 

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!