title: How to drag panels in main Panel
body: <p>How to allow drag &amp; 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 : <a href="http://examples.extjs.eu/freedrag.html" rel="nofollow">http://examples.extjs.eu/freedrag.html</a>
  but i don't understand how to adapte this with my application .</p>
  
  <p>My code :
  ( Is the Sticky items into tabobj tab.Panel then i want drag &amp; drop )</p>
  
  <pre><code>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: '&amp;lt;empty panel&amp;gt;',
          cls: 'empty'
      });
  
      var item3 = Ext.create('Ext.Panel', {
          title: 'Accordion Item 3',
          html: '&amp;lt;empty panel&amp;gt;',
          cls: 'empty'
      });
  
      var item4 = Ext.create('Ext.Panel', {
          title: 'Accordion Item 4',
          html: '&amp;lt;empty panel&amp;gt;',
          cls: 'empty'
      });
  
      var item5 = Ext.create('Ext.Panel', {
          title: 'Accordion Item 5',
          html: '&amp;lt;empty panel&amp;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: '&lt;h1 class="x-panel-header" id="title"&gt;Your Sticky World&lt;/h1&gt;',
          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]
      });
  });
  </code></pre>