Question

我有一个无序列表，可排序的jquery ui，我想知道如何在列表中拖动后存储

的位置。当用户刷新页面时

< li>停留在被拖动的地方。

以下是我的例子：

<!DOCTYPE html>
<head>
<title>Untitled Document</title>
<script type="text/javascript"
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript"
    src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css"
    href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css"/>
</head>

<body>
<ul id="uli">
  <li id="lit1" class="ui-state-default" style="width:100px; height:100px; list-style-type:none"><div>1</div></li>

  <li id="lit2" class="ui-state-default" style="width:100px; height:100px; list-style-type:none"><div>2</div></li>

  <li id="lit3" class="ui-state-default" style="width:100px; height:100px; list-style-type:none"><div>3</div> </li>

</ul>


<script>

$(function() {
    $( "#uli" ).sortable();
    $( "#uli" ).disableSelection();
  });

</script>
</body>
</html>

Answer 1

http://api.jqueryui.com/sortable/#method-serialize

$( "#uli" ).sortable({
  update: function( event, ui ) {
    var sorted = $( this ).sortable( "serialize", { key: "sort" } );
    localStorage['sorted'] = sorted ;
  }
});

如何使用html5 localstorage存储列表的顺序？

1 个答案: