Можно ли переупорядочить вкладки Kendo Tabstrip с помощью перетаскивания?

Question

Можно переупорядочить вкладки с помощью перетаскивания (см. Базовый режим Kendo Tabstrip here)? Аналогично перетаскиванию вкладок в Excel.

Answer 1

Существует решаемый вопрос похож на это на kendo forum, у него уже есть ответ, чтобы решить эту проблему за счет расширения кендо TabStrip виджет и добавить кендо Reorderable в него.

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

Я следую за ответ там и изменить jsfiddle тот, кто задал этот вопрос, и это отлично работает.