使用jQuery和Rails 3实现ajax可排序列表

使用jQuery和Rails 3实现ajax可排序列表，需要遵循以下步骤：

1. 安装jQuery插件

在Rails项目中，可以使用gem 'jquery-rails'来安装jQuery插件。在Gemfile中添加以下代码：

gem 'jquery-rails'

然后运行bundle install来安装插件。

1. 在Rails项目中引入jQuery

在app/assets/javascripts/application.js文件中，添加以下代码：

//= require jquery
//= require jquery_ujs

这样就可以在Rails项目中使用jQuery了。

1. 创建可排序列表

首先，在Rails控制器中创建一个可排序列表的数据。例如，在app/controllers/home_controller.rb文件中添加以下代码：

def index
  @items = Item.all.order(:position)
end

其中，Item是一个模型，position是一个整数字段，用于表示列表项的排序顺序。

然后，在app/views/home/index.html.erb文件中创建一个列表：

<ul id="sortable">
  <% @items.each do |item| %>
    <li id="item-<%= item.id %>"><%= item.name %></li>
  <% end %>
</ul>

这里，我们使用了id="sortable"来标记列表，以便在后面使用jQuery进行排序。

1. 使用jQuery实现排序

在app/assets/javascripts/home.js文件中添加以下代码：

$(document).ready(function() {
  $('#sortable').sortable({
    axis: 'y',
    update: function(event, ui) {
      var data = $(this).sortable('serialize');
      $.ajax({
        data: data,
        type: 'POST',
        url: '/home/sort'
      });
    }
  });
});

这里，我们使用了jQuery的sortable插件来实现列表的排序。当列表项被拖动时，会触发update事件，我们在这个事件中使用ajax将排序结果发送到服务器。

1. 在服务器端处理排序结果

在config/routes.rb文件中添加以下代码：

post 'home/sort' => 'home#sort'

这样，我们就可以在/home/sort路径上接收ajax请求。

接下来，在app/controllers/home_controller.rb文件中添加以下代码：

def sort
  params[:item].each_with_index do |id, index|
    Item.where(id: id).update_all(position: index + 1)
  end
  head :ok
end

这里，我们使用了update_all方法来批量更新列表项的排序顺序。

至此，我们已经实现了使用jQuery和Rails 3实现ajax可排序列表。当用户拖动列表项时，列表项的排序顺序会被自动更新，并且服务器端也会同步更新数据库中的排序顺序。