Delving Deeper into Drag and Drop Programming in Microsoft ASP.NET AJAX
(Page 1 of 5 )
In the first part of this article, we summarized the multiple solutions suggested by MS AJAX, and began building an example to show some of these solutions in action. In the conclusion, we continue exploring this rather complex example to show you the under-the-hood workings of all the client side drag and drop solutions within the MS AJAX framework.
A
downloadable .rar file is available for this article.
Define a Behavior: DraggableProductBehavior to drag the product
With the analysis I gave you before, you can see that this DraggableProductBehavior is virtually a class that has to implement the Sys.Preview.UI.IDragSource interface. We'll attach this behavior to the related HTML DOM element that identifies the product to make it draggable.
Now, just create a new JavaScript file named ShoppingCart.js, and we should register the namespace ShoppingCartNamespace:
Type.registerNamespace("ShoppingCartNamespace");
Next, define the constructor of this class, as well as some necessary fields:
ShoppingCartNamespace.DraggableProductBehavior = function(element) {
// initialize the base class
ShoppingCartNamespace.DraggableProductBehavior.initializeBase(this, [element]);
// the event handler for mouse down
this._mouseDownHandler = Function.createDelegate(this, this._handleMouseDown);
// the pet represented by the draggable object
this._pet = null;
// the translucent element(s) dragged with the mouse moving
this._visual = null;
}
Next comes the prototype definition of the DraggableProductBehavior class:
ShoppingCartNamespace.DraggableProductBehavior.prototype = {
//methods within interface IDragSource
// return the data type of the draggable object--"Pet"
get_dragDataType: function() {
return "Pet";
},
// Obtain data from the draggable object
getDragData: function(context) {
return this._pet;
},
// Set the mode of the draggable object
get_dragMode: function() {
return Sys.Preview.UI.DragMode.Copy;
},
//call it when the dragging starts
onDragStart: function() {
},
//call it when the dragging is going on
onDrag: function() {
},
//call it when the dragging is over
onDragEnd: function(canceled) {
if (this._visual)
this.get_element().parentNode.removeChild(this._visual);
},
//property pet
get_product: function(pet) {
return this._pet;
},
set_pet: function(pet) {
this._pet = pet;
},
// initialize
initialize: function() {
$addHandler(this.get_element(), "mousedown", this._mouseDownHandler);
},
// mousedown event handler
_handleMouseDown: function(ev) {
// DragDropManager need this
window._event = ev;
//set the style of the translucent element(s) dragged with the mouse moving
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);
//notify the DragDropManager that the dragging has started
Sys.Preview.UI.DragDropManager.startDragDrop(this, this._visual, null);
},
//destructor
dispose: function() {
if (this._mouseDownHandler)
$removeHandler(this.get_element(), "mousedown", this._mouseDownHandler);
this._mouseDownHandler = null;
ShoppingCartNamespace.DraggableProductBehavior.callBaseMethod(this, 'dispose');
}
}
Here, we give a typical MS AJAX styled JavaScript definition for a class prototype. Since there are detailed explanations accompanying the above code, we won't cover it any further, while there's one more word to be added -- note how we have implemented each method of the IDragSource interface and tell the DragDropManager to start the dragging operation.
Finally, you have to register the DraggableProductBehavior's behavior into the MS AJAX client-side framework:
ShoppingCartNamespace.DraggableProductBehavior.registerClass(
"ShoppingCartNamespace.DraggableProductBehavior",
Sys.UI.Behavior,
Sys.Preview.UI.IDragSource
);
Next: Write a Behavior: ShoppingCartBehavior to make the shopping cart droppable >>
More ASP.NET Articles
More By Xianzhong Zhu
