Move to the client side JavaScript part. Let us create a DraggableProductBehavior Behavior class which implements Sys.Preview.UI.IDragSource
interface and will be attached to the product DOM elements to provide dragging functionality.
Create a JavaScript file with the name ShoppingCart.js in
the ASP.NET AJAX CTP-Enabled Web Site. Then register a client side namespace.
Listing 7 - Register Namespace in ASP.NET AJAX Client Side Framework
Type.registerNamespace("Dflying");
Add some instance fields to the DraggableProductBehavior
class.
Listing 8 - Instance Fields of DraggableProductBehavior
Dflying.DraggableProductBehavior = function(element) {
// initialize base class
Dflying.DraggableProductBehavior.initializeBase(this, [element]);
// mousedown event handler
this._mouseDownHandler = Function.createDelegate(this, this._handleMouseDown);
// the product object attached to this draggable item
this._product = null;
// the transparent element when dragging the item
this._visual = null;
}
Now let udefine the prototype part of the DraggableProductBehavior
class.
Listing 9 - Prototype Part of DraggableProductBehavior
Dflying.DraggableProductBehavior.prototype = {
}
In the prototype part of the DraggableProductBehavior class,
we should implement the IDragSource interface. List 10 shows the methods
defined in IDragSource interface and the customized implementations in our
case.
Listing 10 - Implement IDragSource Interface
// returns the data type of this draggable item - "Product"
get_dragDataType: function() {
return "Product";
},
// get the data object attached to this draggable item
getDragData: function(context) {
return this._product;
},
// drag mode is set to copy
get_dragMode: function() {
return Sys.Preview.UI.DragMode.Copy;
},
// this method will be called when user starts dragging
onDragStart: function() {
},
// this method will be called when user is dragging
onDrag: function() {
},
// this method will be called when user finishes dragging
onDragEnd: function(canceled) {
if (this._visual)
// remove the transparent element
this.get_element().parentNode.removeChild(this._visual);
},
For the product property, we also
need to add getter and setter in this prototype part to follow ASP.NET AJAX
client side naming convention ("get_" and "set_" prefixes).
Listing 11 - Getter and Setter for "product"
Property
// 'product' property
get_product: function(product) {
return this._product;
},
set_product: function(product) {
this._product = product;
},
The mousedown event handler should
be defined in the prototype part. In the event handler, we first build the
transparent element to reflect the visual effect of a product during dragging and
then inform the DropManager that the dragging operation has started by calling
its startDragDrop() method.
Listing 12 - mousedown Event Handler
// mousedown event handler
_handleMouseDown: function(ev) {
// DragDropManager needs this setting
window._event = ev;
// set the style of the transparent element which follows the cusor
this._visual = this.get_element().cloneNode(true);
this._visual.style.opacity = "0.7";
this._visual.style.filter =
"progid:DXImageTransform.Microsoft.BasicImage(opacity=0.7)";
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);
// start dragging
Sys.Preview.UI.DragDropManager.startDragDrop(this, this._visual, null);
},
Lastly, do not forget the initialize()
and dispose() method, which are required for all the
ASP.NET AJAX client side components.
Listing 13 - initialize() and dispose() Method
initialize: function() {
$addHandler(this.get_element(), "mousedown", this._mouseDownHandler);
},
dispose: function() {
if (this._mouseDownHandler)
$removeHandler(this.get_element(), "mousedown", this._mouseDownHandler);
this._mouseDownHandler = null;
// dispose base class
Dflying.DraggableProductBehavior.callBaseMethod(this, 'dispose');
}
Now we have finished the prototype part of DraggableProductBehavior
class. Let us just register it with the client side ASP.NET AJAX framework.
Listing 14 - Register DraggableProductBehavior
Class
Dflying.DraggableProductBehavior.registerClass(
"Dflying.DraggableProductBehavior",
Sys.UI.Behavior,
Sys.Preview.UI.IDragSource
);
Once the DraggableProductBehavior is attached to a DOM
element, the element could be dragged around the page.