jQueryタブを保存して再利用する

Question

jQueryタブの並べ替え順をエンドユーザが変更した後に保存しようとしていて、次の訪問時にタブの順序を変更できるようにローカルストレージに保存しようとしています。現在、私は、しかし、私はどちらかの方法は、私が行う方法です

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

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

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

に自動的に私の問題をそれを行う必要がありますjQueryの方法に出くわした要素をループすることで、タブのIDを格納してい

新しいタブオーダーを使用しますか？前または後にループして挿入する関数を作成する必要がありますか？または保存されたソートされた値を取得するメソッドがありますか？

何か助けていただければ幸いです。あなたはそれが簡単にだけ変数に結果のHTMLを保存するために見つけるかもしれない

Answer 1

：

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(); 
 
    } 
 
});

#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; 
 
}

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

Answer 2

私がやってで終わるでした：私は検討するかもしれないinteresting-

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); 
      } 
     }