My client need dashboard feature with movable window just like google
analytics dashboard. I thought about CFPOD with drag n drop which allow
user to move pod in two rows. As coldfusion 8 is using EXTJS so I start
implementing 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 moving
while draging from CFPOD header section. In extjs tutorial it was
draging whole div while CFPOD made from number of div so I have change
while draging the div. Changes I have made in JS that is blue color.
That it..
Now about Coldfusion code... Here it is
<cfajaximport tags="cfwindow">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Untitled Document</title>
<script type="text/javascript" src="dd.js"></script>
<script>
var init = function()
{
var dd11 = Ext.get('pod01');
dd11.dd = new Ext.dd.DDProxy('pod01', 'group');
var dd12 = Ext.get('pod02');
dd12.dd = new Ext.dd.DDProxy('pod02', 'group');
};
</script>
<style type="text/css">
body {
font-size: 11px;
}
.dd-ct {
position:absolute;
border: 1px solid silver;
top: 100px;
width:200px;
background-color: #ffffc0;
}
#dd1-ct {
left: 64px;
}
#dd2-ct {
left: 456px;
}
.dd-item {
height: 18px;
border: 1px solid #a0a0a0;
background-color: #c4d0ff;
vertical-align: middle;
cursor: move;
padding: 2px;
z-index: 1000;
}
.dd-ct .dd-item {
margin: 2px;
}
.dd-proxy {
opacity: 0.4;
-moz-opacity: 0.4;
filter: alpha(opacity=40);
}
.dd-over {
background-color: #ffff60;
}
</style>
</head>
<body>
<cfset ajaxOnLoad("MyTest.dd.init, MyTest.dd")>
<table>
<tr>
<td>
<div class="dd-ct" id="dd1-ct">
<cfpod name="pod01" source="displayforpod.cfm?start=1" height="100" width="100" title="Comment 1"/>
<cfpod name="pod02" source="displayforpod.cfm?start=1" height="100" width="100" title="Comment 1"/>
<cfpod name="pod03" source="displayforpod.cfm?start=1" height="100" width="100" title="Comment 1"/>
</div>
</td>
<td>
<div class="dd-ct" id="dd2-ct">
<cfpod name="pod11" source="displayforpod.cfm?start=4" height="100" width="100" title="Comment 4"/>
<cfpod name="pod12" source="displayforpod.cfm?start=5" height="100" width="100" title="Comment 5"/>
<cfpod name="pod13" source="displayforpod.cfm?start=6" height="100" width="100" title="Comment 6"/>
</div>
</td>
</tr>
</table>
</body>
</html>
You may required to import cfwindow tag using following syntex:
<cfajaximport tags="cfwindow">
This tag will include javascript required for drag n drop
functionality. (How do I know? Just simple when using cfwindow tag
window allowing you to drag n drop then ofcourse it will include js for
DD :) ). If you do not want the other files included CFWINDOW then you
can include required JS file from /CFIDE folder and create pid inside
div which will act as container....
Jul 29, 2010 9:27 PM
Sep 11, 2009 at 10:09 AM Nice example.
Jan 22, 2010 at 2:46 AM Thanks for information!