Drag and Drop like iGoogle with ASP.Net Ajax Toolkit

 Download Sample Code

 

 

ASP.Net Ajax toolkit provides a Drag and Drop engine which is a set of client classes and interfaces. Using this engine, the DOM elements can be be dragged and dropped on the web page. The items can be classified in two categories draggable items and drop zones. Draggable items are those which can be dragged on a page and the Drop zones are those items where these draggable items can be dropped.

All these DOM elements must interact with DragDropManager which is a global Javascript object. We always uses DragDropManager  but the actual instance of the DragDropManager used is based on the browser For ex : if IE, then IEDragDropManager is used.

Drag and Drop works you click on a DOM element and drags it on top of the Drop zone and releases the mouse button. When a mouse button is clicked on draggable item, the draggable item invokes the startDragDrop method of DragDropManager. The drop zone element invokes the registerDropTarget method during initialization to register itself with DragDropManager.

To implement it, I created an extender control FloatBehvior and attached it with draggable items. FloatBehavior implements the IDragSource interface and similarly the drop zone implements the IDropTarget interface.

Type.registerNamespace(‘DragAndDrop’);

DragAndDrop.FloatBehavior = function(element) {

    var _dragStartLocation;
    DragAndDrop.FloatBehavior.initializeBase(this, [element]);    
    this.initialize = function() {
        DragAndDrop.FloatBehavior.callBaseMethod(this, ‘initialize’);
        //attaching a handler to mousedown event of DOM element
        //this.get_element() returns the target control for this extender
        $addHandlers($get(this.get_element().id), {’mousedown’:this.onMouseDown},this);         
    }
    this.dispose = function() {           
        $clearHandlers(this.get_element());                      
        DragAndDrop.FloatBehavior.callBaseMethod(this, ‘dispose’);
    }

    this.get_dragDataType = function() {
        return "__Gadget";
    }   
    this.getDragData = function(context) {
        //data to be passed to DragDropManager
        return this.get_element();
    }   
    this.get_dragMode = function() {
        return AjaxControlToolkit.DragMode.Move;
    }   
    this.onDragStart = function() {
        //storing start location to restore the location if Drag Drop fails
        _dragStartLocation = Sys.UI.DomElement.getLocation(this.get_element());
     }   
    this.onDrag = function() {
    }   
    this.onDragEnd = function(canceled) {
        Sys.Debug.trace("onDragEnd "+ canceled);
         var el = this.get_element();      
        if (canceled) {
            Sys.UI.DomElement.setLocation(el, _dragStartLocation.x, _dragStartLocation.y);           
        }
        else {          
        }
    }
    this.startDragAndDrop = function(dragVisual) {
        //Drag drop started
        AjaxControlToolkit.DragDropManager.startDragDrop(this, dragVisual, null);
    }
    this.onMouseDown = function(ev) {
        window._event = ev;
        var el = this.get_element();
        el.style.width = el.offsetWidth + "px";
        el.style.height = el.offsetHeight + "px";           
        ev.preventDefault();
        this.startDragAndDrop(el);
    }
}

DragAndDrop.FloatBehavior.registerClass(‘DragAndDrop.FloatBehavior’, AjaxControlToolkit.BehaviorBase, AjaxControlToolkit.IDragSource,  Sys.IDisposable);

To attach this behavior to a DOM element

<ddl:FloatExtender ID="FloatingExtender1" TargetControlID="GadgetHeader" runat="server"></ddl:FloatExtender>         

Similarly a extender control is needed for drop target

Type.registerNamespace(‘DragAndDrop’);
DragAndDrop.DragAndDropBehavior = function(element) {
    DragAndDrop.DragAndDropBehavior.initializeBase(this, [element]);
    this._dropDivValue = null;
}

DragAndDrop.DragAndDropBehavior.prototype = {

    initialize : function() {
        DragAndDrop.DragAndDropBehavior.callBaseMethod(this, ‘initialize’);
        AjaxControlToolkit.DragDropManager.registerDropTarget(this);
    },

    dispose : function() {
        AjaxControlToolkit.DragDropManager.unregisterDropTarget(this);
        DragAndDrop.DragAndDropBehavior.callBaseMethod(this, ‘dispose’);
    },
    get_DropDiv : function()
    {
        return this._dropDivValue;
    },
    set_DropDiv: function(value)
    {
        this._dropDivValue = value;
    },
    canDrop : function(dragMode, dataType, dragData) {
        //Sys.Debug.trace("In canDrop dragMode =" +dragMode +" dataType ="+dataType+" dragData=" +dragData );       
        //Return false to cancel drop or true to allow
        return dataType == ‘__Gadget’;
    },   
    drop : function(dragMode, dataType, dragData) {
        //Sys.Debug.trace(‘Item dropped’);  
        //dragData is the DOM element being dragged
        this.addGadget(dragData);           
        this.get_element().style.backgroundColor = ‘#5885c5′;
    },   
    onDragEnterTarget : function(dragMode, dataType, dragData) {
        this.get_element().style.backgroundColor = ‘#808080′;
    },   
    onDragInTarget : function(dragMode, dataType, dragData) {
    },   
    onDragLeaveTarget : function(dragMode, dataType, dragData) {
        this.get_element().style.backgroundColor = ‘#5885c5′;
    },
    addGadget: function(data)
    {
        var el = this.get_element();               
        //remove DOM element from its original location
        data.parentNode.removeChild( data );
        //add at new location
        el.insertBefore( data, $get(this._dropDivValue) );
    }
}

DragAndDrop.DragAndDropBehavior.registerClass(‘DragAndDrop.DragAndDropBehavior’, AjaxControlToolkit.BehaviorBase, AjaxControlToolkit.IDropTarget,  Sys.IDisposable);

 

To attach this extender to a DOM element

<ddl:DragAndDropExtender ID="DrapDropExtender1" TargetControlID="RightColumn" DropDiv="DropDiv2" runat="server"></ddl:DragAndDropExtender>

  I have attached a sample application with this post. Have a look and let me know your suggestions.