问题描述
如何允许拖放在主面板中放置面板？
我有一个面板包含一个面板（暂时）或一些面板，我想允许拖放组织面板。
喜欢这个例子：
但我不明白如何适应我的应用程序。
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.htmlbut i don't understand how to adapte this with my application .
我的代码：
（粘滞物品是tabobj tab.Panel然后我想要拖放）
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: '<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]
});
});
推荐答案
查看可以帮助。
主要思想是，一般来说，创建 for您正在拖动的每个面板。
所以，以下代码段可以帮助您获得基本功能：
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');
}
}
}]
}
或者，为了更通用（检查afterrender监听器）：
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');
}
}
});
以下是您最感兴趣的渲染部分（使用ExtJS 3的原始页面）：
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
这篇关于如何在主面板中拖动面板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！