Как перетащить панели в главную панель

Question

Как разрешить перетаскивание панелей на главной панели?У меня есть панель, которая содержит одну панель (на данный момент) или некоторые панели, и я хочу разрешить перетаскивание для организации панелей.как эти примеры: http://examples.extjs.eu/freedrag.html, но я не понимаю, как адаптировать это с моим приложением.

Мой код: (Является ли Sticky items в tabobj tab.Panel, тогда я хочу перетащить и отпустить)

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

Просмотр источников страницы может помочь.

Основная идея, как правило, заключается в создании Ext.dd.DDProxy для каждой перетаскиваемой панели. Итак, следующий фрагмент может помочь вам получить базовую функциональность:

{
    title: 'My Stickys',
    xtype: 'panel',
    items : [{
        xtype : 'stick',
        listeners : {
            afterrender : function(stick){
                stick.dd = new Ext.dd.DDProxy(stick.el.dom.id, 'group');
            }
        }
    }]
}

Или, чтобы быть более универсальным (проверьте слушателя afterrender):

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');
        }
    }
});

Вот часть рендера, которая вас больше всего интересует (хотя исходная страница использует ExtJS 3):

// 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