每天一剂Rails良药之Creating a Drag-and-Drop Sortable List
今天来看看用Rails创建一个可拖拽的List。1，创建Rails项目，搭建数据库
Migration:class AddPersonAndGroceryListsAndFoodItemsTables < ActiveRecord::Migrationdef self.up create_table :people do |t| t.column :name, :string end create_table :grocery_lists do |t| t.column :name, :string t.column :person_id, :integer end create_table :food_items do |t| t.column :grocery_list_id, :integer t.column :position, :integer t.column :name, :string t.column :quantity, :integer endenddef self.down drop_table :people drop_table :grocery_lists drop_table :food_itemsendendModel:class Person < ActiveRecord::Basehas_many :grocery_listsendclass GroceryList < ActiveRecord::Basehas_many :food_items, :order => :positionbelongs_to :personendclass FoodItem < ActiveRecord::Basebelongs_to :grocery_listacts_as_list :scope => :grocery_listend
这里一个Person对应多个GroceryList，一个GroceryList对应多个FoodItem
我们可以运行ruby script/console或者直接访问数据库来初始化几条数据
这里我们创建一个Person，一个GroceryList和3个FoodItem，并保持外键关联
2，引入javascript
可以通过用一个layout文件来做这件事，如app/views/layouts/standard.rhtml:
<html> <head> <%= javascript_include_tag :defaults %> </head> <body> <%= yield %> </body></html>
3，创建一个列表controller
如app/controllers/grocery_list_controller.rb:
class GroceryListController < ApplicationControllerlayout 'standard' def show @grocery_list = GroceryList.find(params[:id])end def sort @grocery_list = GroceryList.find(params[:id]) @grocery_list.food_items.each do |food_item| food_item.position = params['grocery-list'].index(food_item.id.to_s) + 1 print food_item.position food_item.save end render :noting => trueendend
4，创建列表视图
如app/views/grocery_list/show.rhtml:
<h2><%= @grocery_list.person.name %>'s Grocery List</h2><h3><%= @grocery_list.name %></h3><ul id="grocery-list"> <% @grocery_list.food_items.each do |food_item| %> <li id="item_<%= food_item.id %>"> <%= food_item.quantity %> units of <%= food_item.name %> </li> <% end %></ul><%= sortable_element 'grocery-list', :url => { :action => "sort", :id => @grocery_list }, :complete => visual_effect(:highlight, 'grocery-list')%>
5，访问看看效果
打开浏览器访问http://localhost:3000/grocery_list/show/1看看
我们拖拽一条数据在列表中的位置，然后刷新页面，发现该条数据的位置在数据库中保存了
6，原理
我们的FoodItem类有一个position列，并且声明为acts_as_list，并且GroceryList按照position来排序，我们的sortable_element()这个helper方法为我们生成一段为Sortable.create(...)的JavaScript代码为我们做Ajax调用，访问sort方法，而sort方法则在数据库中保存列表经拖拽后的新的position。
页:
[1]