16.5.2  使用sortable_element排列列表项

sortable_element是另一个可支持Ajax交互的方法，这个方法把页面中多个列表项定义成可上下拖动的元素，通过上下拖动这些HTML元素，从而允许手动对这些列表项进行排序。当用户拖动完成后，Rails会将排序后的元素id以异步方式发送到服务器。

使用sortable_element方法的语法格式如下：

sortable_element(element_id, options = {})

该方法将会把element_id属性对应的HTML元素里所有的列表项变成可排序的列表项。因为该方法会发送Ajax选项，因此可以接受如下几个选项。

·:url：该选项指定一个符合url_for格式的URL地址。

·:update：该选项指定使用服务器响应来更新哪个HTML元素。

除此之外，当然也可指定:complete、:loaded等Ajax交互阶段的特定选项。

下面的页面代码将会使用sortable_element方法来把系列列表项转成可排序的列表项。页面代码如下：

<h3>可重新排序的列表项</h3>
<div id="list">
<!-- 迭代@books实例变量，每个元素生成一个列表项 -->
<% @books.each do |book| %>
<li id="item_<%= book %>"><%= book %></li>
<% end %>
</div>
<p id="list-info"></p>
<!-- 指定list元素里的子元素可以拖动 -->
<%= sortable_element 'list', 
# 使用服务器响应来更新list-info元素
:update => 'list-info', 
# Ajax交互完成后高亮显示
:complete => visual_effect(:highlight, 'list'), 
:url => { :action => "order" } %>

上面页面代码迭代输出@books实例变量，该实例变量是一个数组，每个数组元素对应生成一个列表项。除此之外，该页面还使用sortable_element将list所有的列表项定义成可重新排序的列表项。当用户每次拖动这些列表项重新排序时，都会向order Action发送异步请求。order Action的代码如下：

def order
# 被调整顺序后的列表项会作为list参数发送到控制器
@order = params[:list]
# 提交到list页面显示处理结果
render :partial => 'list'
end

上面方法中定义了一个实例变量，这个实例变量里封装的是请求参数list的值，然后将处理结果提交到_list.rhtml页面显示。_list.rhtml页面的代码如下：

更新后的顺序是: <%= @order.join(', ') %>.

_list.rhtml页面的代码非常简单，仅仅只是输出了控制器中的@order实例变量而已。

在浏览器中拖动页面元素，看到如图16.18所示的效果。

图16.18  可排序列表项的效果

正如上面的代码中看到的，因为sort Action实际上并未对请求进行任何处理，仅仅只是将获得的请求参数提交到_list.rhtml页面输出，因此我们可以在图16.18中看到请求参数。从图中可以看出：sort Action取得的请求参数正是列表项排序后的id值。

值得指出的是，上面页面在生成列表项时，使用了这样的代码：<li id="item_<%= book %>"><%= book %></li>。不难发现，每个列表项的id都是item_XXX的形式，这是Rails的要求，它要求可排序列表项的id值满足item_XXX的格式。当用户拖动列表项重新排序时，系统将把排序后所有列表项的id作为数组一起发送到服务器，但会去掉前面的item_前缀。

注意

使用sortable_element来生成可排序的列表项时，别忘了让所有列表项的id为item_XXX的格式。