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

我有以下代码：

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

$（函数（）{
$（“#可排序”）.sortable（）；
$（“#可排序”）.disableSelection（）；
});

第1项
第2项
第3项
第4项
第5项
第6项
第7项

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

---

感谢您的帮助

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

1） 饼干
2） 数据库

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

---

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

我认为您需要设置cookie或使用db结果感谢您的清理，我肯定计划在db中长期存储，不过有一个问题，我有ajax和jquery的中级技能，你能给我指出一个很好的起点吗？我在一些博客和网站上看到，这是通过php和jquery实现的，但不是通过rails实现的，所以我对代码有点困惑。谢谢，谢谢你提供的信息。将继续寻找如何做到这一点。