如何保持jquery ui可排序交互的状态

Question

我有以下代码：

<script>
$(function() {
    $( "#sortable" ).sortable();
    $( "#sortable" ).disableSelection();
});
</script>


<div class="demo">

   <ul id="sortable">
    <li class="ui-state-default">Item 1</li>
    <li class="ui-state-default">Item 2</li>
    <li class="ui-state-default">Item 3</li>
    <li class="ui-state-default">Item 4</li>
    <li class="ui-state-default">Item 5</li>
    <li class="ui-state-default">Item 6</li>
    <li class="ui-state-default">Item 7</li>
   </ul>

</div>

当我第一次加载页面时，列表在此（下面的第一张图片）顺序（1到7）中，然后我移动并更改列表的顺序（下面的第二张图片）。点击重新加载，订单恢复原始订单。 是否可以保留更改的列表顺序。

感谢您的帮助

Answer 1

这基本上是关于如何在页面刷新之间存储数据的问题。它不是jQuery UI特有的东西。通常有两个主要的地方可以存储必要的数据：

1）饼干
2）数据库

如果要长期维护列表的顺序，则需要使用数据库。如果这只是一个短期问题，那么两个解决方案中的cookie可能会更好，因为它更简单，并且不需要大量的AJAX请求。

HTML5还提供本地数据存储，因此您可以完成同样的事情。但并不是所有浏览器都支持它。