PLugin Drag and drop between grid and target placeholder

bbdd.js

Ext.namespace('Ext.ux.dd');

Ext.ux.dd.BigBrotherGridDD = Ext.extend(Ext.util.Observable, {
	copy: true
	,scrollable: true
	,constructor: function(config){
        if (config)
			Ext.apply(this, config);

        // this.addEvents({
			// beforerowmove: true
			// ,afterrowmove: true
			// ,beforerowcopy: true
            // ,afterrowcopy: true
        // });
       Ext.ux.dd.BigBrotherGridDD.superclass.constructor.call(this);
    }
	,init: function(grid){		
        this.grid = grid;
		this.targetPlaceholder = false;
		/* Custom event that the ownerCT should fire when both grid are rendered */
		this.grid.addEvents({"bbdragdrop": true});		
        this.grid.enableDragDrop = true;
		this.grid.on('render', this.onRender, this);
		this.grid.on('bbdragdrop', this.initDD, this);		
    }
		
	,initDD: function(){
		var tg = Ext.getCmp(this.grid.targetGrid);
		var view = this.grid.getView();	
		var self = this;
		this.grid.dropZone = new Ext.dd.DropZone(tg.getView().scroller.dom, {
			ddGroup: this.grid.ddGroup || 'assignBBAccount'
			,getTargetFromEvent: function(e) {
				return e.getTarget(tg.getView().rowSelector);
			}
			,onNodeEnter : function(target, dd, e, data){ 
				var t = Ext.lib.Event.getTarget(e);
				var rowIndex = tg.getView().findRowIndex(t);
				var tgContent = Ext.select('#'+tg.id+' .x-grid-empty').elements[0];
				self.addTargetPlaceholder(tgContent, dd, true);
			}
			,onNodeOut : function(target, dd, e, data){ 
				self.resetTargetPlaceholder();
			}
			,onNodeOver : function(target, dd, e, data){ 
				return Ext.dd.DropZone.prototype.dropAllowed;
			}
			,onNodeDrop : function(target, dd, e, data){
				return true;
			}
		});
	}
	
	,addTargetPlaceholder: function(el, dd, hideEl){
		if(!this.targetPlaceholder){
			var t = Ext.fly(el);
			var ghostSize = dd.proxy.getEl().getSize();
			this.targetPlaceholder = t.insertSibling({cls:'bb-highlight-dropzone'});
			this.targetPlaceholder.setSize(ghostSize);
		} else {
			this.targetPlaceholder.insertBefore(el);
		}		
	}
	
	,resetTargetPlaceholder: function(){
		this.targetPlaceholder.remove();
		this.targetPlaceholder = false;
	}
	
	,onRender: function(){
		var BigBrotherStatusProxy = Ext.extend(Ext.dd.StatusProxy, {
			constructor: function(config) {
				BigBrotherStatusProxy.superclass.constructor.call(this, config);
				this.el.addClass("bb-proxy");
			},
			reset: function(config) {
				BigBrotherStatusProxy.superclass.reset.apply(this, arguments);
				this.el.addClass("bb-proxy");
			}
		});
		
		var BigBrotherGridDragZone = Ext.extend(Ext.grid.GridDragZone, {
			constructor: function(grid, config) {
				this.proxy = new BigBrotherStatusProxy();
				BigBrotherGridDragZone.superclass.constructor.call(this, grid, config);
			}
			,onInitDrag: function (x, y) {
				/* Custom classes for bb */
				Ext.fly(this.dragData.sourceEl).addClass('bb-source-el');
				var data = this.dragData;	
				this.proxy.update(data.ghost);
				this.onStartDrag(x, y);
				this.proxy.el.disableShadow();
			}
			,autoOffset: function(x, y) {			
				var el = Ext.get(this.dragData.sourceEl);				
				var xy = el.getXY();
				this.setDelta(x-xy[0], y-xy[1]);
			}
			,getDragData : function(e){				
				var t = Ext.lib.Event.getTarget(e);
				var rowIndex = this.view.findRowIndex(t);				
				if(rowIndex !== false && typeof rowIndex !== "undefined"){
					var el = e.getTarget(this.view.rowSelector);
					var ghost = el.cloneNode(true);
					var sm = this.grid.selModel;
					if(!sm.isSelected(rowIndex) || e.hasModifier()){
						sm.handleMouseDown(this.grid, rowIndex, e);
					}
					this.ddel.className = 'x-grid-dd-wrap bb-drag';
					return {grid: this.grid, ddel: this.ddel, rowIndex: rowIndex, selections:sm.getSelections(),sourceEl:el, ghost: ghost};
				}
				return false;	
			}
			,onEndDrag: function (data, e) {
				Ext.fly(this.dragData.sourceEl).removeClass('bb-source-el');
			}
			,onValidDrop: function (dd, e, id) {
				this.grid.fireEvent('dragdrop', this.grid, this.dragData.selections, dd, e);
				this.hideProxy();
			}
		});
		
		this.grid.view.dragZone = new BigBrotherGridDragZone(this.grid, { ddGroup: this.grid.ddGroup });
	}
});