Question

我需要在刷新页面时保存可排序的项目我不知道怎么做可以任何人帮助我并且非常感谢我用过这段代码

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

Answer 1

最后我明白了..

第一个：您需要将data-arrange添加到li元素中以获取其中的数字，以便将其与我们将保存在本地存储上的数组进行比较

第二名：您需要使用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();

Check DEMO Here

Jquery：保存可排序的项目保存

1 个答案: