AJAX-enabled sortable elements in Rails, the movie

To sweeten the waiting time to the next Rails release, here’s a short movie showing the new sortable_element helper in action:

AJAX sortable element movie

The code for this is actually a one-liner (including the effect). In your view do:

<%= sortable_element 'list',
      :update => 'list-info',
      :complete => visual_effect(:highlight, 'list'),
      :url => { :action => "order" } %>

The list element is just a normal HTML unordered list (but you could do this with other element types, too). The list items have ids themselves, in the form of something_number, e.g. item_1.

When the list order changes by dragging-and-dropping, these numbers will be posted to the given action via AJAX.

The referenced action order then just reads out the order by querying params[:list], which is an array consisting of the numbers in the current order.