Ext.js拖動效果實現插件

版本支持：3.4.x

其他版本使用需要做兼容調整

使用時只需在代碼中引用插件：plugins: new Ext.ux.panel.DraggableTabs()

<script>
		Ext.onReady(function () {
			var tabPanelConfig = {
				plugins: new Ext.ux.panel.DraggableTabs(), //引用插件
				activeTab: 0,
				height: 150,
				width: 300,
				defaults: {
					border: false,
					closable: true,
					xtype: 'panel'
				},
				items: [{
					html: 'Tab 1 contents',
					title: 'Tab1'
				}, {
					html: 'Tab 2 contents',
					title: 'Tab2'
				}, {
					html: 'Tab 3 contents',
					title: 'Tab3'
				}],
				bbar: {
					xtype: 'toolbar',
					items: [{
						iconCls: 'icon-add',
						text: 'Add Tab',
						listeners: {
							click: {
								fn: function() {
									this.ownerCt.ownerCt.add({ title: 'New Tab' });
								}
							}
						}
					}]
				}
			},
			tabPanel1,
			tabPanel2;
			
			Ext.QuickTips.init();
			tabPanel1 = new Ext.TabPanel(Ext.apply({
				renderTo: 'tab-panel1',
				enableTabScroll: true,
				listeners: {
					reorder: {
						fn: function (tabPanel, movedTab) {
							// do something here
						}
					}
				}
			}, tabPanelConfig));
			
			tabPanel2 = new Ext.TabPanel(Ext.apply({
				renderTo: 'tab-panel2',
				tabPosition: 'bottom'
			}, tabPanelConfig));
		});
	</script>

使用在相同版本中只需要替換插件：