Как получить заказ вручную отсортированных вкладок jQuery?

Question

Я использую official sortable jQuery UI tabs example для интерфейса, где пользователь может перемещать вкладки вокруг определенного порядка.

Теперь мне нужна кнопка, чтобы «сохранить» этот конкретный заказ, который этот пользователь создал в массиве. Как мне это сделать?

Answer 1

Вы имели в виду что-то вроде этого? Этот скрипт возвращает порядок вкладок после каждого изменения.

$(function() { 
 
    $("#tabs").tabs().find("ul").sortable({ 
 
     axis : "x", 
 
     update: function (e, ui) { 
 
      var tabsArray = []; 
 
      $("#tabs > ul > li > a").each(function(){ 
 
       tabsArray.push(this.id); 
 
      }); 
 
      alert(tabsArray); 
 
     } 
 
    });    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
 
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
 

 
<div id="tabs"> 
 
    <ul> 
 
    <li id="li-1"><a id="Tab 1" href="#tabs-1">Tab 1</a></li> 
 
    <li id="li-2"><a id="Tab 2" href="#tabs-2">Tab 2</a></li> 
 
    <li id="li-3"><a id="Tab 3" href="#tabs-3">Tab 3</a></li> 
 
    </ul> 
 
    <div id="tabs-1"> 
 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p> 
 
    </div> 
 
    <div id="tabs-2"> 
 
    <p>Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. </p> 
 
    </div> 
 
    <div id="tabs-3"> 
 
    <p>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. </p> 
 
    </div> 
 
</div>