Is it possible to reorder Kendo Tabstrip tabs with drag and drop?

Question

Is is possible to reorder the tabs with drag and drop (see Kendo Tabstrip basic mode here)? Similar to dragging tabs in Excel.

Answer 1

There is a solved question similar to this on kendo forum, it already has the answer to solve this problem by extending the kendo tabstrip widget and add kendo Reorderable into it.

var numTabs = 1, tabs = null;

var reorderableTabStrip = kendo.ui.TabStrip.extend({
    options: {
        name: 'ReorderableTabStrip'
    },

    init: function ( element, options ) {
        kendo.ui.TabStrip.fn.init.call(this, element, options);
        this.applyReorderable();
    },

    applyReorderable: function () {
        var reorderable = this.tabGroup.data('kendoReorderable');
        if ( reorderable ) {
          reorderable.destroy();
        }

        this.tabGroup.kendoReorderable({
            group: 'tabs',
            filter:'.k-item',
            hint: function(element) {
                return element.clone().wrap('<ul class="k-tabstrip-items k-reset"/>').parent().css({opacity: 0.8});
            },
            change: $.proxy(this.onReorderableChange, this)
        });
    },

    onReorderableChange: function ( event ) {
        if ( event.newIndex < event.oldIndex ) {
            this.tabGroup.children('.k-item:eq('+event.newIndex+')').before( this.tabGroup.children('.k-item:eq('+event.oldIndex+')') );
            this.element.children('.k-content:eq('+event.newIndex+')').before( this.element.children('.k-content:eq('+event.oldIndex+')') );
        }
        else {
            this.tabGroup.children('.k-item:eq('+event.newIndex+')').after( this.tabGroup.children('.k-item:eq('+event.oldIndex+')') );
            this.element.children('.k-content:eq('+event.newIndex+')').after( this.element.children('.k-content:eq('+event.oldIndex+')') );
        }
        this._updateClasses();
    }
});
kendo.ui.plugin( reorderableTabStrip );

tabs = $('#tabs').kendoReorderableTabStrip().data('kendoReorderableTabStrip');

$('#button').click( onButtonClick );

function onButtonClick () {
    numTabs++;
    tabs.append({
        text: 'Tab ' + numTabs,
        content: 'Tab ' + numTabs + ' Content'
    });
    tabs.applyReorderable();
}

I follow the answer there and modify the jsfiddle by the one who asked the question and it's work fine.