How to drag panels in main Panel - extjs

Question

How to allow drag & drop panels in a main panel ?
I have a panel which contains one panel ( for the moment ) or somes panels and i want allow drag and drop for organize panels.
like this examples : http://examples.extjs.eu/freedrag.html
but i don't understand how to adapte this with my application .
My code :
( Is the Sticky items into tabobj tab.Panel then i want drag & drop )
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.Action',
'Ext.tab.*',
'Ext.button.*',
'Ext.form.*',
'Ext.layout.*'
]);
Ext.onReady(function() {
Ext.tip.QuickTipManager.init();
Ext.define('Mesclasses.objet.sticky', {
alias: ['widget.stick'],
extend: 'Ext.panel.Panel',
bodyStyle: {
background: 'yellow',
},
height: 150,
width: 150,
margin: '10 0 0 10',
draggable: true,
items: [{
xtype: 'label',
text: 'Title',
listeners: {
move: function (me, x, y, opt) {
alert('move');
}
}
}],
});
var item2 = Ext.create('Ext.Panel', {
title: 'Accordion Item 2',
html: '<empty panel>',
cls: 'empty'
});
var item3 = Ext.create('Ext.Panel', {
title: 'Accordion Item 3',
html: '<empty panel>',
cls: 'empty'
});
var item4 = Ext.create('Ext.Panel', {
title: 'Accordion Item 4',
html: '<empty panel>',
cls: 'empty'
});
var item5 = Ext.create('Ext.Panel', {
title: 'Accordion Item 5',
html: '<empty panel>',
cls: 'empty'
});
var accordion = Ext.create('Ext.Panel', {
region: 'west',
margins: '5 0 5 5',
split: true,
width: 210,
layout: 'accordion',
items: [item2, item3, item4, item5]
});
var paneltitle = Ext.create('Ext.panel.Panel', {
region: 'north',
html: '<h1 class="x-panel-header" id="title">Your Sticky World</h1>',
height: 40
});
var montab = Ext.create('Ext.tab.Tab', {
title: 'lol',
});
var tabobj = Ext.create('Ext.tab.Panel', {
region: 'center',
//xtype: 'tabpanel', // TabPanel itself has no title
activeTab: 0, // First tab active by default
items: [{
title: 'My Stickys',
xtype: 'panel',
items: [{
xtype: 'stick',
}]
}]
});
Ext.create('Ext.container.Viewport', {
layout: 'border',
renderTo: Ext.getBody(),
items: [
paneltitle,
accordion, {
region: 'south',
title: 'South Panel',
collapsible: true,
html: 'Information goes here',
split: true,
height: 100,
minHeight: 100
}, {
region: 'east',
title: 'East Panel',
collapsible: true,
split: true,
width: 150
},
tabobj]
});
});

Answer 1

Reviewing the sources of the page could help.
The main idea is, generally, to create Ext.dd.DDProxy for each panel you are dragging.
So, the following snippet could help you get the basic functionality working:
{
title: 'My Stickys',
xtype: 'panel',
items : [{
xtype : 'stick',
listeners : {
afterrender : function(stick){
stick.dd = new Ext.dd.DDProxy(stick.el.dom.id, 'group');
}
}
}]
}
Or, to be more generic (check the afterrender listener):
Ext.define('Mesclasses.objet.sticky',{
alias : ['widget.stick'],
extend : 'Ext.panel.Panel',
bodyStyle: {
background: 'yellow',
},
height : 150,
width : 150,
margin : '10 0 0 10',
draggable : true,
items: [{
xtype: 'label',
text : 'Title',
listeners : {
move : function(me,x,y,opt){
alert('move');
}
}
}],
listeners : {
afterrender : function(stick){
stick.dd = new Ext.dd.DDProxy(stick.el.dom.id, 'group');
}
}
});
Here is the render part you are mostly interested in (original page using ExtJS 3 though):
// runs after the window is rendered
,afterRender:function() {
// create items using template
Ext.Window.prototype.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, {
win: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.win.lastZIndex + 1});
dragEl.update(el.dom.innerHTML);
dragEl.addClass(el.dom.className + ' dd-proxy');
this.constrainTo(this.win.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.win.divs[this.itemIndex];
div.x = el.getLeft(true);
div.y = el.getTop(true);
this.win.fireEvent('itemdrag', this);
} // eo function afterDrag
}) // eo apply
}, this); // eo each
} // eo function afterRender