jQuery：保存可排序的项目

Question

刷新页面时，我需要保存可排序的项目，但我不知道该怎么做可以帮助我，非常感谢我使用了此代码

$( "#right_info" ).sortable({
  tolerance: 'pointer',
  cursor: 'move',
  revert: 500,
 });

Answer 1

终于我明白了 ..

1：您需要向li元素添加data-arrange以从中获取数字以将其与我们将保存在本地存储中的数组进行比较

第二：您需要使用localStorage.setItem('sort',data); //to set the array of elements localStorage.setItem('sort',data); //to set the array of elements和localStorage.getItem()以获取排序数组

所以你的代码应该是这样的

HTML

<div class="demo">
    <ul id="sortable">
        <li class="ui-state-default" data-arrange="1"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
        <li class="ui-state-default" data-arrange="2"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
        <li class="ui-state-default fixed" data-arrange="3"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
        <li class="ui-state-default" data-arrange="4"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
        <li class="ui-state-default fixed" data-arrange="5"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
        <li class="ui-state-default" data-arrange="6"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
        <li class="ui-state-default" data-arrange="7"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
    </ul>

</div>

JS

if(localStorage.getItem('sort')){
    var array = localStorage.getItem('sort').split(',');
      map = {},
      el = $('ul');
  alert(array);
  $('ul > li').each(function() { 
      var el = $(this);
      map[el.data('arrange')] = el;
  });
  $('ul').html('');
  for (var i = 0; i <= array.length; i++) {
    if (array[i]) {
        $('ul').append(map[array[i]]);
    }
  }
}; //to get.


$("#sortable").sortable({
    cancel: ".fixed",
    update: function (event, ui) {
        var data = [];
        $('#sortable').find('li').each(function(i) {
            data.push($(this).data('arrange'));
        });
        localStorage.setItem('sort',data); //to set
        }
});
$("#sortable").disableSelection();

在此处检查演示