如何在ExtJS 7中实现TabPanel标签项的拖拽重排功能？

方案1：经典版使用原生自带插件（最简单） #

ExtJS 7经典版（Classic Toolkit）内置了tabbarreorderer插件，直接配置到TabPanel的tabBar即可实现拖拽重排：

Ext.create('Ext.tab.Panel', {
    renderTo: Ext.getBody(),
    width: 600,
    height: 400,
    tabBar: {
        plugins: {
            ptype: 'tabbarreorderer'
        }
    },
    items: [
        { title: '标签1', html: '内容1' },
        { title: '标签2', html: '内容2' },
        { title: '标签3', html: '内容3' }
    ]
});

这个插件支持拖拽时的视觉反馈，自动处理标签的重新排序逻辑，无需额外编写代码。

方案2：现代版自定义拖拽逻辑 #

如果使用ExtJS 7现代版（Modern Toolkit），需要基于ExtJS的Ext.drag模块手动实现拖拽功能，以下是一个自定义插件的示例：

Ext.define('MyApp.ux.TabReorderer', {
    extend: 'Ext.plugin.Abstract',
    alias: 'plugin.tabreorderer',

    init: function(tabPanel) {
        var tabBar = tabPanel.getTabBar();

        tabBar.on('render', function() {
            // 为每个标签项创建拖拽源
            tabBar.items.each(function(tab) {
                new Ext.drag.Source({
                    element: tab.element,
                    handle: tab.element,
                    proxy: {
                        type: 'placeholder' // 拖拽时显示占位符
                    },
                    listeners: {
                        dragstart: function(source) {
                            this.draggedTab = source.getComponent();
                        },
                        dragend: function() {
                            this.draggedTab = null;
                        },
                        scope: this
                    }
                });
            });

            // 为标签栏设置拖拽目标
            new Ext.drag.Target({
                element: tabBar.element,
                listeners: {
                    drop: function(target, info) {
                        var draggedTab = this.draggedTab,
                            targetTabEl = info.event.target.up('[data-ref="tab"]', null, true),
                            targetTab = targetTabEl ? Ext.getCmp(targetTabEl.id) : null,
                            items = tabPanel.getItems();

                        if (!draggedTab || !targetTab || draggedTab === targetTab) {
                            return;
                        }

                        // 获取原索引和目标索引
                        var fromIdx = items.indexOf(draggedTab),
                            toIdx = items.indexOf(targetTab);

                        // 移除并插入标签，完成重排
                        items.remove(draggedTab);
                        items.insert(toIdx, draggedTab);
                        // 激活拖拽后的标签
                        tabPanel.setActiveTab(draggedTab);
                    },
                    scope: this
                }
            });
        }, this);
    }
});

// 使用自定义插件
Ext.create('Ext.tab.Panel', {
    renderTo: Ext.getBody(),
    width: 600,
    height: 400,
    plugins: ['tabreorderer'],
    items: [
        { title: '标签1', html: '内容1' },
        { title: '标签2', html: '内容2' },
        { title: '标签3', html: '内容3' }
    ]
});

方案3：社区适配插件 #

部分社区开发者维护了适配ExtJS 7的类似Ext.ux.panel.DDTabPanel的插件，你可以在ExtJS相关的社区论坛或代码仓库中查找（注意选择兼容ExtJS 7版本的资源）。

内容的提问来源于stack exchange，提问作者scott f