jQuery UI保存可排序位置

Question

我想保存li的位置，我将元素拖到ul中。但它不会保存李的位置。

这是html代码：

<div class="col-md-12" id="formdrag">
     <ul>
         <li id="draggable" class="ui-state-highlight">Drag me down</li>
     </ul>

      <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>
      </ul>
</div>

以下是我尝试保存位置的脚本：

<script>
$( function() {
var sPositions = localStorage.positions || "{}",
positions = JSON.parse(sPositions);
$.each(positions, function (id, pos) {
    $("#" + id).css(pos)
})
$( "#sortable" ).sortable({
  revert: true
});
$( "#draggable" ).draggable({
  connectToSortable: "#sortable",
  helper: "clone",
  containment: "#sortable",
  revert: "invalid",
  stop: function (event, ui) {
        positions[this.id] = ui.position
        localStorage.positions = JSON.stringify(positions)
    }
});
$( "ul, li" ).disableSelection();
} );
</script>  

谢谢你的时间！