Delving Deeper into Drag and Drop Programming in Microsoft ASP.NET AJAX - Write a Behavior: ShoppingCartBehavior to make the shopping cart droppable
(Page 2 of 5 )
This behavior -- ShoppingCartBehavior, as we imagined beforehand, must implement the Sys.Preview.UI.IDropTarget interface. We will attach this behavior to the related HTML DOM element that represents the shopping cart and make it accept the draggable object.
Still, let's first define the constructor as well as some related fields:
ShoppingCartNamespace.ShoppingCartBehavior = function(element) {
//initialize the base class
ShoppingCartNamespace.ShoppingCartBehavior.initializeBase(this, [element]);
// pet list in the cart
this._pets = new Object();
}
Now we come to the prototype definition of ShoppingCartBehavior. Still for brevity, we'll omit the related explanations, but you should also note how we implement the methods of the IDropTarget interface and how the DragDropManager deals with registering/unregistering the dropped object.
ShoppingCartNamespace.ShoppingCartBehavior.prototype = {
//get the target to drop ( in this case-the shopping cart)
get_dropTargetElement: function() {
return this.get_element();
},
//Judge whether the draggable element can be dropped onto the target
canDrop: function(dragMode, dataType, data) {
return (dataType == "Pet" && data);
},
//Drop the draggable element onto the related target
drop : function(dragMode, dataType, data) {
if (dataType == "Pet" && data) {
// since there doesn't exist this kind of article in the
//shopping cart, set the value of field Quantity 1
if (this._pets[data.Id] == null) {
this._pets[data.Id] = {Pet: data, Quantity: 1};
}
//since there's already the article in the shopping cart
//plus 1 to field Quantity
else {
this._pets[data.Id].Quantity++;
}
//Refresh the shopping cart UI
this._refreshShoppingCart();
//restore the old color of the shopping cart
this.get_element().style.backgroundColor = "#fff";
}
},
// call this function when the draggable element is located on the drop target
onDragEnterTarget : function(dragMode, dataType, data) {
if (dataType == "Pet" && data) {
//set the color of the shopping cart to grey
this.get_element().style.backgroundColor = "#E0E0E0";
}
},
//call this function when the draggable element is away from the drop target
onDragLeaveTarget : function(dragMode, dataType, data) {
if (dataType == "Pet" && data) {
// restore the old color of the shopping cart
this.get_element().style.backgroundColor = "#fff";
}
},
// call this function when the draggable element is being dragged on the drop
target
onDragInTarget : function(dragMode, dataType, data) {
},
//refresh the shopping cart with the product
//list in the current shopping cart
_refreshShoppingCart: function() {
var cartBuilder = new Sys.StringBuilder();
for (var id in this._pets) {
cartBuilder.append("<div>");
cartBuilder.append(this._pets[id].Pet.Name);
cartBuilder.append(" * ");
cartBuilder.append(this._pets[id].Quantity);
cartBuilder.append("</div>");
}
this.get_element().innerHTML = cartBuilder.toString();
},
//Return the object holding the required product id and quantity
getProductsToBeOrdered: function() {
var productsToBeOrdered = new Object();
for (var id in this._products) {
productsToBeOrdered[id] = this._pets[id].Quantity;
}
return productsToBeOrdered;
},
// initialization
initialize: function() {
// initialize the base class
ShoppingCartNamespace.ShoppingCartBehavior.callBaseMethod(this,
"initialize");
//register the drop target in the DragDropManager
Sys.Preview.UI.DragDropManager.registerDropTarget(this);
},
//destruction function
dispose: function() {
//cancel registering the drop target in the DragDropManager
Sys.Preview.UI.DragDropManager.unregisterDropTarget(this);
ShoppingCartNamespace.ShoppingCartBehavior.callBaseMethod(this,
"dispose");
}
}
Similarly, you should register ShoppingCartBehavior's behavior into the MS AJAX client-side framework (you can see that this behavior has implemented the IDropTarget interface):
ShoppingCartNamespace.ShoppingCartBehavior.registerClass
("ShoppingCartNamespace.ShoppingCartBehavior",
Sys.UI.Behavior, Sys.Preview.UI.IDropTarget);
Last but not the least; please remember to call the notifyScriptLoaded() method of Sys.Application at the end of the ShoppingCart.js file to notify the ASP.NET AJAX client-side framework that this script has been loaded successfully:
if(typeof(Sys)!=='undefined')Sys.Application.notifyScriptLoaded();
Next: Coding the web page >>
More ASP.NET Articles
More By Xianzhong Zhu
