JSFiddle - React, Tailwind, and code Playground

by chanaka1

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<div id="tabs">
    <ul>
        <li class="k-state-active">Tab 1</li>
    </ul>
    <div>
Tab 1 Content
    </div>
</div>

<button id="button">Add Tab</button>

JavaScript

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 () {
        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();
}