Comment faites glisser les panneaux dans le Panneau principal

Comment permettre drag & drop des panneaux panneau principal ?
J'ai un panneau qui contient un panneau ( pour le moment ) ou quelques panneaux et je veux permettre de glisser et déposer pour organiser des panneaux.
comme cet exemple : http://examples.extjs.eu/freedrag.html
mais je ne comprends pas comment adapte cela à ma demande .

Mon code :
( Est-ce que le Collant éléments dans tabobj onglet.Puis je veux 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]
});
});
J'ai posé une question similaire il y a quelques temps, il pourrait vous donner quelques idées: stackoverflow.com/questions/3108958/...
Oui, je trouve que le portail de l'exemple est une bonne source d'informations, mais je ne comprends pas comment faire pour que cela fonctionne ! :/
Il m'a fallu un certain temps pour accorder sur ce qui se passait, mais j'ai réussi. J'espère que vous aussi 🙂
Pourquoi continuez-vous à l'édition de postes à mettre des espaces entre "fonction" et la suite de parenthèses? C'est pas la norme, s'il vous plaît arrêter. Il devrait être function(), pas function ().

OriginalL'auteur Mepps | 2011-08-14

  1. 1

    L'examen de la sources de la page pourrait vous aider.

    L'idée principale est, en général, pour créer Ext.dd.DDProxy pour chaque panneau que vous faites glisser.
    Ainsi, le fragment de code suivant peut vous aider à obtenir les fonctionnalités de base de travail:

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

    Ou, pour être plus générique (vérifier la afterrender auditeur):

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

    Voici le rendu de la partie vous êtes surtout intéressé (page d'origine à l'aide de ExtJS 3 tout de même):

    //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 . Vous pensez que je peux adapter le freedrag exemple, pour mon problème ?

    OriginalL'auteur Li0liQ