如何获取手动排序的 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>