Drag n Drop feature with cfpod in coldfusion 8

My client need dashboard feature with movable window just like googleanalytics dashboard. I thought about CFPOD with drag n drop which allowuser to move pod in two rows. As coldfusion 8 is using EXTJS so I startimplementing in EXTJS using dd class

Below is full working code for it.

// reference local blank image

Ext.BLANK_IMAGE_URL = '../extjs/resources/images/default/s.gif';
Ext.namespace('MyTest');
// create application
MyTest.dd = function() {
var dragZone1, dragZone2, dropTarget1, dropTarget2;
return {
init: function() {
    dragZone1 = new MyTest.dd.MyDragZone('dd1-ct', {ddGroup: 'group',scroll: false});
    dragZone2 = new MyTest.dd.MyDragZone('dd2-ct', {ddGroup: 'group',scroll: false});
    dropTarget1 = new MyTest.dd.MyDropTarget('dd1-ct', {ddGroup: 'group', overClass: 'dd-over'});
    dropTarget2 = new MyTest.dd.MyDropTarget('dd2-ct', {ddGroup: 'group', overClass: 'dd-over'});
}
};
}();

MyTest.dd.MyDragZone = function(el, config) {
config = config || {};
Ext.apply(config, {
    ddel: document.createElement('div')
});

MyTest.dd.MyDragZone.superclass.constructor.call(this, el, config);
};

Ext.extend(MyTest.dd.MyDragZone, Ext.dd.DragZone, {
getDragData: function(e) {
    var target = Ext.get(e.getTarget());
    if(target.hasClass('ypod-hd'))
    {
    var dragItm = Ext.get(target.dom.parentNode.parentNode.parentNode.id);
    return {ddel:this.ddel, item:dragItm};
    }
    return false;
},

onInitDrag: function(e) {
    this.ddel.innerHTML = this.dragData.item.dom.innerHTML;
    this.ddel.className = this.dragData.item.dom.className;
    this.ddel.style.width = this.dragData.item.getWidth() + "px";
    this.proxy.update(this.ddel);
},

getRepairXY: function(e, data) {
    data.item.highlight('#e8edff');
    return data.item.getXY();
},
notifyDrop: function(dd, e, data) {
    this.el.removeClass(this.overClass);
    this.el.appendChild(data.item);
    return true;
}
});

MyTest.dd.MyDropTarget = function(el, config) {
MyTest.dd.MyDropTarget.superclass.constructor.call(this, el, config);
};
Ext.extend(MyTest.dd.MyDropTarget, Ext.dd.DropTarget, {
notifyDrop: function(dd, e, data) {
    this.el.removeClass(this.overClass);
    this.el.appendChild(data.item);
    return true;
}
});
 

Hey...I am not going to explain JS. It is already well-explained in extjs.tutorial Custom Drag n Drop and Advance Drag n Drop.I almost copying tutorial JS. On change I need to do is start movingwhile draging from CFPOD header section. In extjs tutorial it wasdraging whole div while CFPOD made from number of div so I have changewhile draging the div. Changes I have made in JS that is blue color.That it..

Now about Coldfusion code... Here it is

You may required to import cfwindow tag using following syntex:



This tag will include javascript required for drag n dropfunctionality. (How do I know? Just simple when using cfwindow tagwindow allowing you to drag n drop then ofcourse it will include js forDD :) ). If you do not want the other files included CFWINDOW then youcan include required JS file from /CFIDE folder and create pid insidediv which will act as container....

View working example