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 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);
})