Question

我有一个＆＃34;任务列表＆＃34;我正在使用＆＃34; sortable＆＃34;这样用户可以优先考虑它们，将最重要的那些放在首位。但是，当然，每次刷新页面时，它们都会回到原来的位置。我想知道是否可以保存任务的位置？

这是我的代码（它是一个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选择器通过swithin改变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);
})

jQuery UI：如何保存＆＃34;可排序＆＃34;？

2 个答案: