Drag and Drop Lists - 14 Mar 2012
JQuery makes it easy to add sortable lists to your Rails application. You’ll want to add the following code to one of your CoffeeScript files.
jQuery -> $('.sortable').sortable update: -> $.post( $(this).attr( 'url' ), $(this).sortable 'serialize' )
Taking advantage of the Rails helper method, content_tag_for
, makes it easy to pass the necessary information to our CoffeeScript. You can create a sortable list in your views with the following haml code:
%ul.sortable{ url: "#{sort_lists_url}" } - @lists.each do |list| = content_tag_for :li, list do = list.title
JQuery will then pass the IDs of our lists in the order they appear to the URL we specified in the url attribute on our sortable class, through params[:list]
. We can then save the positions JQuery sends to the controller with the following code:
def sort params[:list].each_with_index do | list_id, index | List.update_all( { position: index }, { id: list_id } ) end render nothing: true end