Question

我正在尝试在最终用户更改后保存jQuery选项卡的排序顺序，然后将它们保存到本地存储，以便我可以在下次访问时重新排序选项卡。

目前我通过循环元素来存储选项卡的id，但是我遇到了一个应该自动执行的jQuery方法

https://api.jqueryui.com/sortable/#method-serialize

     var sorted = $( ".selector" ).sortable( "serialize", { key: "sort" } );

      var sortedIDs = $( ".selector" ).sortable( "toArray" );

我的问题无论是我如何使用新的Tab键顺序？我是否必须创建一个在之前或之后循环和插入的函数？或者是否有一个方法来获取保存的排序值？

感谢任何帮助。

Answer 1

您可能会发现将生成的html存储在变量中更容易：

＆＃13;

 var sorter = $("#sortable");

 var goSort = function() {
   sorter.sortable();
   sorter.disableSelection();
 };
 goSort();

 var starter = sorter.html();
 var storeroom = starter;

 $('.start').on({
   mouseup: function() {
     sorter.html(starter);
     goSort();
   }
 });

 $('.recent').on({
   mouseup: function() {
     sorter.html(storeroom);
     goSort();
   }
 });

 $('.record').on({
   mouseup: function() {
     storeroom = sorter.html();
   }
 });

＆＃13;

#sortable {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 60%;
}
#sortable li {
  margin: 0 3px 3px 3px;
  padding: 0.4em;
  padding-left: 1.5em;
  font-size: 1.4em;
  height: 18px;
}
#sortable li span {
  position: absolute;
  margin-left: -1.3em;
}
.record,
.start,
.recent {
  display: inline-block;
  font-size: 1em;
  width: 5em;
  height: 2em;
  border: 1px solid #09f;
  padding: 0.5em;
}

＆＃13;

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<ul id="sortable">
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
</ul>

<div class="start">start</div>
<div class="record">record</div>
<div class="recent">restore</div>

＆＃13;

Answer 2

我最终做了：

    function reorderTabs() {
            var ul = document.getElementById("menu");

            var tabList = tabsArray.split(",");
            for (var i = 0; i < tabList.length; i++) {
                var el = tabList[i];
                var li = document.getElementById(el);
                ul.appendChild(li);
            }
        }

保存并重用jQuery选项卡排序顺序

2 个答案: