Lim Jia Wei Lim Jia Wei - 5 months ago 24
Javascript Question

How to get order of manually sorted jQuery tabs?

I'm using the official sortable jQuery UI tabs example for an interface where user can move the tabs around for a specific order.

Now I need a button to "save" this specific order that this user has created in an array. How do I do that?

Answer

Did you mean something like this? This script returns the order of tabs after every change.

$(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>