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

I have a list of "tasks" and I'm using "sortable" so that a user can prioritize them, putting the most important ones on top. But of course, every time the page is refreshed they go back to their original position. I'm wondering if it's possible to save the position of the tasks?

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

Here's my code (it's a rails project):

这是我的代码（这是一个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>

2 个解决方案

#1

You can use jQuery cookie and get the li position using jQuery UI sortable toArray:

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

Serializes the sortable's item id's into an array of string.

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

then in the load change the li position by swithin their position using insertAfter and eq selector.

然后在负载中使用insertAfter和eq选择器通过swithin改变li位置。

Code:

码：

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

Demo: http://jsfiddle.net/IrvinDominin/amq6gt8w/

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

Alternatively instead of using cookie you can call two server methods to set and get the element positions.

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

#2

You can find the index of the task and save it and sort based on index while displaying.

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

To find the index of the task on UI refer this : Fiddle

要在UI上查找任务的索引，请参阅：小提琴

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

#1