An enhanced version of Rapid’s <collection> tag that supports drag-and-drop re-ordering.

Each item in the collection has a <div class="ordering-handle" param="handle"> added, which can be used to drag the item up and down.


  • item
    • handle
    • default
      • card


sortable-collection supports all of the options and events defined by jQuery UI’s Sortable.

Sortable also supports all of the standard Hobo AJAX callbacks.

The jQuery UI option update is used internally to save the new order via Ajax. If you modify this option, your function may call $(this).hjq_sortable_collection('update') to retain this functionality.

Controller support

This tag assumes the controller has a reorder action and the model has a position_column method. This action is added automatically by Hobo’s model-controller if the model declares acts_as_list. See also Drag and Drop Reordering in the Controllers and Routing chapter of the manual.

Show Source

Edit this page