所谓的 Ajax 拖拉 UI，就是直接用鼠标进行拖拉排序，这种方式对用户来说操作速度更快。

 

 

拖拉的 UI 需要额外的前端套件，这里介绍 jQuery UI 的 ，并直接使用  这个 gem 来安装

编辑 Gemfile

Gemfile

+  gem 'jquery-ui-rails'

编辑 app/assets/javascripts/admin.js

app/assets/javascripts/admin.js

//= require bootstrap-datepicker/core  //= require bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN  //= require ckeditor/init+ //= require jquery-ui

编辑 app/assets/stylesheets/admin.scss，其中 .sortable_icon 是给画面中可被拖拉的 ☰ 的样式

app/assets/stylesheets/admin.scss

+  @import "jquery-ui";++  .sortable .sortable_icon {+   border: none;+   color: #ECECEC;+   font-size: 20px;+   cursor: move;+   padding-right: 10px;+  }

执行 bundle，重启服务器

编辑 app/views/admin/events/index.html.erb

app/views/admin/events/index.html.erb

     
      +  
+  
+  
          <% @events.each do |event| %>-    
        +    
-      
+ 
 <% end %> + 
      
          
             
<%= check_box_tag "全选", "1", false, :id => "toggle_all" %>
             
Event Name
             
Actions
          
      
      
       
       
       
               
         <%= check_box_tag "ids[]", event.id %>       
        
<%= link_to event.name, admin_event_path(event) %>
        
 + ☰ + <%= link_to event.name, admin_event_path(event) %> + 
         
 - <%= link_to "上移", reorder_admin_event_path(event, :position => :up), :method => :post, :class => "btn btn-default" %> - <%= link_to "下移", reorder_admin_event_path(event, :position => :down), :method => :post, :class => "btn btn-default" %> <%= link_to "置顶", reorder_admin_event_path(event, :position => :first), :method => :post, :class => "btn btn-default" %> <%= link_to "置底", reorder_admin_event_path(event, :position => :last), :method => :post, :class => "btn btn-default" %> <%= link_to "Tickets", admin_event_tickets_path(event), :class => "btn btn-default" %> <%= link_to "Edit", edit_admin_event_path(event), :class => "btn btn-default" %> <%= link_to "Delete", admin_event_path(event), :method => "delete", :data => { :confirm => "Are you sure?" }, :class => "btn btn-danger" %> 
       
      
      
 
 <%= select_tag :event_status, options_for_select( Event::STATUS.map{ |s| [t(s, :scope => "event.status"), s] }), :class => "form-control" %> <%= submit_tag t(:bulk_update), :class => "btn btn-primary" %> <%= submit_tag t(:bulk_delete), :class => "btn btn-danger", :data => { :confirm => "Are you sure?" } %> 
 <% end %> 

设计解说：

1. 我们将整个 tr 包在 tbody 之中，好让 $( ".sortable" ).sortable 将 tbody 标籤内的 tr 都变成可以拖拉，而不会拖拉到标题列 thead 中的 tr。
2. 因为每个活动的 reorder 网址都不同，所以我们将网址放在 data-reorder-url="<%= reorder_admin_event_path(event) %> 之中，这样在 jQuery 里面透过 reorder_url = ui.item.data('reorder-url') 就可以取得 Ajax 要送去的网址。

编辑 app/controllers/admin/events_controller.rb

app/controllers/admin/events_controller.rb

def reorder    @event = Event.find_by_friendly_id!(params[:id])    @event.row_order_position = params[:position]    @event.save!-    redirect_to admin_events_path+    respond_to do |format|+      format.html { redirect_to admin_events_path }+      format.json { render :json => { :message => "ok" }}+    end  end