PDA

View Full Version : Create a div on drop action



DJ JJ
17 Jan 2011, 12:41 AM
I have a viewport with a tree panel and a panel inside. I need to drag a node from the tree and drop it on the panel; on the drop action I wanna create a div in the panel that I can move around. I'm following and example from Saki; it create statically the divs that can be moved in the panel. I wanna add other divs dinamically on node drop, but I think that isn't possibile...anyone can help me?
http://img189.imageshack.us/i/immaginega.png/
here there is my code



datFed = Ext.extend(datFedUi, {
initComponent: function() {
datFed.superclass.initComponent.call(this);
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
},

divs:[
{x:20, y:20, i:'add'}
,{x:80, y:20}
,{x:140, y:20}
,{x:200, y:20}
,{x:20, y:80}
,{x:80, y:80}
,{x:140, y:80}
,{x:200, y:80}
]

// save state on these events
,stateEvents:['move','resize','itemdrag']

// return also item coordinates as part of state
,getState:function() {
//var state = Ext.Window.prototype.getState.call(this);
var state = Ext.Window.prototype.getState.call(this);
state.divs = this.divs;
return state;
}

// item creation template
,tpl: new Ext.XTemplate(
'<tpl for="divs">'
,'<div id="item-{#}" class="item draggable" style="top:{y}px;left:{x}px;"><img src="images/{i}.png"></div>'
,'</tpl>'
)

,afterRender:function() {
datFedUi.superclass.afterRender.apply(this, arguments);


this.tpl.overwrite(this.body, this);
// setup D&D
var items = this.body.select('div.draggable');

// loop through draggable items
items.each(function(el, ce, index) {

// create DDProxy
el.dd = new Ext.dd.DDProxy(el.dom.id, 'group');

// configure the proxy
Ext.apply(el.dd, {
datFed:this
,itemIndex:index

// runs on drag start
// create nice proxy and constrain it to body
,startDrag:function(x, y) {
var dragEl = Ext.get(this.getDragEl());
var el = Ext.get(this.getEl());

dragEl.applyStyles({border:'','z-index':this.datFed.lastZIndex + 1});
dragEl.update(el.dom.innerHTML);
dragEl.addClass(el.dom.className + ' dd-proxy');

this.constrainTo(this.datFed.body);
} // eo function startDrag

// runs on drag end
// save new position of item and fire itemdrag event to save state
,afterDrag:function() {
var el = Ext.get(this.getEl());
var div = this.datFed.divs[this.itemIndex];
div.x = el.getLeft(true);
div.y = el.getTop(true);
this.datFed.fireEvent('itemdrag', this);
} // eo function afterDrag

}) // eo apply

}, this); // eo each

var bbb=this.body;
var dd = new Ext.dd.DropTarget(bbb, {
ddGroup:'treeDD'
,notifyDrop:function(dd, e, node) {

//I don't know how to create a new div here

return true;
}
})}
});
Ext.reg('datFed', datFed);

DJ JJ
18 Jan 2011, 1:53 AM
is the notifyDrop function the wrong place to put the code?

DJ JJ
20 Jan 2011, 6:46 AM
I found how to add and element to the array, but it doesn't exist in the notifyDrop, so I cannot append it on drop... how can I resolve it?

DJ JJ
21 Jan 2011, 12:47 AM
I modified my code and now it works... the strange thing is that it work good in Debug mode, but not when I reload the page without the debugger. I noticed that my object are created before the garbage collector call :(



var bbb=this.body;
var dd = new Ext.dd.DropTarget(bbb, {
ddGroup:'treeDD'
,notifyDrop:function(dd, e, node) {
alert(kkk[1].x);
kkk.push({x:210, y:250, i:'ABR'});
kkk.push({x:299, y:299, i:'BSH'});
return true;
}
})}


Note: kkk is the variable that contains the div (I put var kkk=this.div before the template overwrite)