jQuery UI：如何保存“可排序”？

Question

我有一个“任务”列表，我使用的是“可排序”，以便用户可以对它们进行优先排序，将最重要的任务放在最前面。 但是，当然，每次刷新页面时，它们都会返回其原始位置。 我想知道是否可以保存任务的位置？

这是我的代码（这是一个Rails项目）：

<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>

  <script>
    $(document).ready(function() {
      $('.move').sortable();
      });
  </script>


<%= render "form" %>



<div class="move">
<% if !@project.tasks.blank? %>
  <% for item in @project.tasks %>
  <div class="container">
  <div class="panel panel-default">
  <div class="panel-heading">
    <div class='move'><%= item.title %></div>
  </div>
  </div>
  <div class="panel-body">
  <p>
    <div class='move'><%= item.description %></div>
  </p>
  <%= link_to "Edit", edit_project_task_path(@project, item) %> 
  </div>
  </div>
  <% end %>
<% end %>
</div>

Answer 1

您可以使用jQuery cookie并使用jQuery UI sortable toArray获得li位置：

将可排序项的项目ID序列化为字符串数组。

然后在负载中，使用insertAfter和eq选择器在其位置内改变li位置。

码：

var savedOrd = $.cookie('sortOrder');
if (savedOrd) {
    $.each(savedOrd.split(','), function (i, e) {
        $('#' + e).insertAfter('#sortable>li:eq(' + i + ')');
    });
}

$('#save').click(function () {
    var saveOrd = $('#sortable').sortable('toArray');
    $.cookie('sortOrder', saveOrd);
});

演示： http ： //jsfiddle.net/IrvinDominin/amq6gt8w/

另外，您可以调用两个服务器方法来设置和获取元素位置，而不是使用cookie。

Answer 2

您可以找到任务的索引并将其保存，并在显示时根据索引进行排序。

要在UI上找到任务的索引，请参考： Fiddle

$("div").click(function(){
    var index = $("div").index($(this));
    var position =  index+1;
    $('span').html(position);
})