How to drag panels in main Panel

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: '&lt;empty panel&gt;',
        cls: 'empty'
    });

    var item3 = Ext.create('Ext.Panel', {
        title: 'Accordion Item 3',
        html: '&lt;empty panel&gt;',
        cls: 'empty'
    });

    var item4 = Ext.create('Ext.Panel', {
        title: 'Accordion Item 4',
        html: '&lt;empty panel&gt;',
        cls: 'empty'
    });

    var item5 = Ext.create('Ext.Panel', {
        title: 'Accordion Item 5',
        html: '&lt;empty panel&gt;',
        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]
    });
});

I asked a similar question some time ago, it might give you some ideas: http://stackoverflow.com/questions/3108958/extjs-3-x-can-i-make-a-panel-or-a-container-movable — Chau, Aug 15 '11 at 06:45
Yes, I find than portal example is good source of informations but i don't understand how to that works ! :/ — Vincent Guesné, Aug 15 '11 at 11:41
It took me some time to tune in on what was happening, but I managed. I hope you do too :) — Chau, Aug 15 '11 at 12:28
@DarinKolev Why do you keep editing posts to put spaces between "function" and the following parentheses? This is *not* the standard, please stop. It should be `function()`, not `function ()`. — Adi Inbar, Aug 26 '13 at 15:41

Li0liQ · Accepted Answer · 2011-08-14T22:57:50.440

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

Hum, ok . You think i can adapt the freedrag example for my problematic ? — Vincent Guesné, Aug 15 '11 at 11:36

How to drag panels in main Panel

1 Answers1

Linked