如何保留 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）cookie
2）数据库

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

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