Custom Client Side Drag and Drop Behavior in ASP.NET AJAX
page 7 of 13
by Lifu Chen
Average Rating: 
Views (Total / Last 10 Days): 67696/ 146

Draggable Product - Implement IDragSource by DraggableProductBehavior

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


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

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); = "0.7"; = 
        "progid:DXImageTransform.Microsoft.BasicImage(opacity=0.7)"; = 99999;
    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


Once the DraggableProductBehavior is attached to a DOM element, the element could be dragged around the page.

View Entire Article

User Comments

Title: Sweeet........   
Name: Stuie B
Date: 2011-08-21 3:17:02 PM
Dude, U da man.
Title: remove item from the list   
Name: Farida
Date: 2010-02-15 4:37:35 AM
what if i want to add a script function to implement the remove item from the Cart list
i need to do so at ShoppingCart.js to be able to use the products List
i tried to add this script function inside Dflying.ShoppingCartBehavior.prototype = {} but it did not work
Title: An alternative solution   
Name: Joel
Date: 2010-01-21 4:31:25 PM
Also you can use a product. Kalitte Dynamic Dashboards for Asp.Net allows you to use any Asp.Net server control inside widgets.
Title: Drag and Drop items between two gridviews   
Name: vnc
Date: 2009-11-17 2:49:16 PM
I need to implement a functionality in my project. I have two gridviews. First grid has 5 columns and second grid has only one column. The last column of first grid is "Names". And the only column in second grid also "Names". I need to assign names from second grid to first grid by using drag and drop functionality.While drag and drop from second grid, It should replace the exist item from the last column of first grid and the item which I drag and drop from second grid should still remain in second grid. Any ideas please!..
Title: great job   
Name: zafar
Date: 2009-11-08 11:01:29 AM
excellent job.i implement drag and drop features using java script but using ajax is great job.excellent
Title: Thanks   
Name: laohouer
Date: 2009-03-01 2:23:49 PM
Thanks for your code.
Title: Good Article   
Name: khurram khan
Date: 2008-12-30 11:33:26 PM
A good article you can find same type of article at
Title: Drag and Drop among multiple target   
Name: Premchandra Khaba
Date: 2008-12-30 7:58:07 AM
Very Nice Article, Thanks Dflying Chen.

Thanks Niko u too for some modification.

Now I have a question. If I want to create some grouping mangment using this code, i need the facility to drag and drop among(at least 2 target) target container, then how I could achieve this. please give me some hint.
Title: Great Article   
Name: Bhushan Patil
Date: 2008-12-24 1:16:21 AM
Hey this is gr8 work,

I using u r work in my project, can u help me I have to add functionality so that user can remove items from shopping cart. please help me.
Title: Great article   
Name: LogicStar
Date: 2008-10-12 5:50:48 PM
Thank you for such a detailed article. Makes things clear.
Title: VB   
Name: Seed
Date: 2008-08-14 11:10:08 AM
Anyone find a similar example using vb in
Title: Drag and Drop between two Pages   
Name: Lec
Date: 2008-06-24 3:47:39 AM
Is it possible to Drag a Product from Page A and Drop this Product into a Container on Page B??
Title: DropTarget   
Name: Lec
Date: 2008-06-23 8:13:10 AM
Is it possible to get the id of the drop-target in the drop-event?
Title: Pre populate   
Name: Lee
Date: 2008-05-02 9:34:30 AM
Does anyone have some code to pre populate the shopping cart?
Title: Firefox Fix   
Name: Lee
Date: 2008-04-29 4:09:04 PM
Just wanted to let everyone know that I finally got the Firefox fix below to work. Just a missing ,


If anyone can help with the remove of an object from the drop area that would be great..
Title: Firefox Fix   
Name: Lee
Date: 2008-04-29 12:03:07 PM
Just wanted to say that the Firefox fix listed below did not work in version 2.0. Does anyone else know how to fix this issue?

Also does anyone have a more detailed example of how to do a drag remove of an item? For example drag it out of the shopping cart to a trash bin.

Title: Wonder Full code   
Date: 2008-03-09 1:23:57 PM
Code is very easy to understand...and i have got greatest help from this code...
Title: grid use   
Name: Max
Date: 2007-11-21 5:26:38 PM
CAn we use grid rows to drag and drop into the cart?
Title: Excellent   
Name: Chetan
Date: 2007-10-30 11:26:02 AM
A good article on drag and drop
Title: please answer   
Name: newbie
Date: 2007-10-06 10:41:40 PM
i posted a question before - please answer - its urgent
Title: does not work with click event handler   
Name: newbie
Date: 2007-10-05 10:56:19 AM
i have implemented your code successfully but i am stuck now - i have an a href="javascript.. to this i want to add the drag functionality. when i add the drag functionality, my click handler does not work. i can either do a click OR a drag. how do i implement both? any ideas how to modify create so that drag functionality is added to my link and not overrides the click event
Title: Nice! And a question...   
Name: Marcellus Tryk
Date: 2007-08-08 2:36:30 PM
This is cool! Can anyone give me the lowdown on the $create function?

- Marcellus
Title: Drop target on a table   
Name: Luis Esteban
Date: 2007-08-06 12:59:25 PM
Hello, I need to make the dropable target a table, and that the draggable items can be droppable in any cell of the table, can you please tell me how to it.
Title: Team Lead   
Name: Piyush Solanki
Date: 2007-08-06 6:42:57 AM
We need to test the feature.
Title: to anyone   
Name: Ryanb58
Date: 2007-07-25 5:29:11 PM
This artical s code does not work as well a i wanted it to
Title: to niko   
Name: Dflying
Date: 2007-07-13 8:57:19 AM
That sounds great!
thank you very much!
Title: to ssankofa   
Name: Dflying
Date: 2007-07-13 8:55:18 AM
Sorry but I am not quite familiar with VB syntax but seems that there's some existing 'translators' which may translate the C# code into VB one directly.
Title: to Prakash   
Name: Dflying
Date: 2007-07-13 8:53:17 AM
for now I did not implement the 'remove' feature. and if you wanna add this, you may have to add more info to the item stored in the shopping cart such as the id. then in the _refreshShoppingCart(), it should be very easy to iterate each of the products and find the right one to be removed.

about the paging, will you please explain more? what's the requirement or what's the user scenario?
Title: g   
Name: niko
Date: 2007-07-09 4:04:34 PM
nice !! (sorry for my bad english

but under firefox , when your start drag, you select text too when the mouse move , to resolve it :

add to function in ShoppingCart.js
_false: function(){
return false;
_true: function(){
return true;

in this function add

// this method will be called when user starts dragging
onDragStart: function() {
document.onmousedown = this._false;

finaly add in onDragEnd :
// this method will be called when user finishes dragging
onDragEnd: function(canceled) {

document.onmousedown = this._true;

if (this._visual)
// remove the transparent element
Title: Product.vb in the App_Code folder   
Name: ssankofa
Date: 2007-07-08 12:19:21 PM
My hosting company set up a Microsoft Club site which places .vb files in my App_Code directory by default. I get an error message when I try to include the Product.cs file from this application. The files '/App_Code/Product.cs' and "the existing files" use a different language, which is not allowed since they need to be compiled together. Is it possible to see a sample of the application coded in VB?
Title: Dflying   
Name: Prakash
Date: 2007-07-03 3:45:25 PM
how do we remove item from UI.Can u pass the code
As i have 2 things to add in the list id and string while dropping in the container if i want to remove the link is fine but how do iremove from the list using _refreshShoppingCart()

Also if i want to add paging what happens
Title: to Prakash   
Name: Dflying
Date: 2007-07-02 10:01:16 PM
you just simply add a 'remove' link beside the item in the shopping cart and in the click event handler you invoke another web service method, passing the item id. then in the callback function, just remove this item from UI.
Title: >net developer   
Name: Prakash
Date: 2007-07-02 9:53:37 PM
if you want to remove items from cart how do you do that
Title: to mk2   
Name: Dflying
Date: 2007-06-23 6:28:16 AM
no it is not a must but it will be a good idea if you could build it as a Behavior.
Title: to amin   
Name: Dflying
Date: 2007-06-23 6:26:58 AM
you do not need to 'install' anything on the server, but just install the Microsoft ASP.NET AJAX 1.0 and ASP.NET AJAX Futures CTP locally on your dev machine and deploy the DLLs to your server - everything will just be fine.
Title: very nice but ...   
Name: amin
Date: 2007-06-23 3:40:30 AM
Hi dear friend,
It was so Great and useful. I have searching for this article several months and know Im so happy to find it, But a question : is it necessary to install anything on server computer which hosts this particular drag and drop enabled website on the web?

Title: great job.   
Name: mk2
Date: 2007-06-21 12:00:10 PM
Is it must Inherit Sys.UI.Behavior?
Title: cool   
Name: webabcd
Date: 2007-06-20 9:13:11 PM
i admire you for your article
Title: Ajax   
Name: Selvaraj
Date: 2007-06-20 3:01:43 AM
It's very useful.
Title: g   
Name: sdtsfhh
Date: 2007-06-20 12:35:02 AM

Community Advice: ASP | SQL | XML | Regular Expressions | Windows

©Copyright 1998-2023  |  Page Processed at 2023-10-02 9:40:21 PM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search