メインパネルのパネルをドラッグする方法

Question

メインパネルのドロップパネル&をドラッグする方法を教えてください。 私は1つのパネル（現時点では）またはいくつかのパネルを持っているパネルを持っていると私はパネルを整理するためのドラッグアンドドロップを許可したい。 この例のように：http://examples.extjs.eu/freedrag.html 私は私のアプリケーションでこれを適応させる方法を理解していません。

マイコード： は助けることができるページのsourcesを確認

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

（tabobj tab.Panelにスティッキーアイテムは、その後、私は&ドロップをドラッグしたいです）。

主な考え方は、一般に、ドラッグするパネルごとにExt.dd.DDProxyを作成することです。 （afterrenderリスナーを確認してください）、より汎用的であることを、

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

または：： だから、次のコードでは、基本的な機能の作業を得るのを助けることができ

ここ

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