如何获取手动排序的 jQuery 标签的顺序？

Question

我正在使用 official sortable jQuery UI tabs example 作为界面，用户可以在其中为特定订单移动选项卡。

现在我需要一个按钮来 "save" 这个用户在数组中创建的特定订单。我该怎么做？

Answer 1

你的意思是这样的吗？此脚本 returns 每次更改后的选项卡顺序。

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

如何获取手动排序的 jQuery 标签的顺序？

How to get order of manually sorted jQuery tabs?

jquery

jquery-ui

jquery-ui-sortable

jquery-ui-tabs