#147 Sortable Lists (revised)

Oct 13, 2011 | 6 minutes | Views, Ajax

Here I show how to use jQuery UI to make a sortable list and a "sort" action to handle the updating. Top it off with acts_as_list to make it feature complete.

Click to Play Video ▶

Download:
source codeProject Files in Zip (86.4 KB)
mp4Full Size H.264 Video (18.3 MB)
m4vSmaller H.264 Video (7.55 MB)
webmFull Size VP8 Video (10.9 MB)
ogvFull Size Theora Video (15.8 MB)

Browse Source Code

Resources

          bash
        
rails g migration add_position_to_faqs position:integer
rake db:migrate

          views/faqs/index.html.erb
        
<ul id="faqs" data-update-url="<%= sort_faqs_url %>">
<% @faqs.each do |faq| %>
  <%= content_tag_for :li, faq do %>
    <span class="handle">[drag]</span>
    <%= link_to h(faq.question), faq %>
  <% end %>
<% end %>
</ul>

          app/assets/javascripts/faqs.js.coffee
        
jQuery ->
  $('#faqs').sortable
    axis: 'y'
    handle: '.handle'
    update: ->
      $.post($(this).data('update-url'), $(this).sortable('serialize'))

          faqs_controller.rb
        
def index
  @faqs = Faq.order("position")
end

def sort
  params[:faq].each_with_index do |id, index|
    Faq.update_all({position: index+1}, {id: id})
  end
  render nothing: true
end

          app/assets/stylesheets/faqs.css.scss
        
#faqs .handle {
  font-size: 12px;
  color: #777;
  cursor: move;
}

          Gemfile
        
gem 'acts_as_list'

          models/faq.rb
        
acts_as_list