Mobile & iPad friendly sortable-collections

Posted by Henry Baragar.
I could not get [sortable-collection]( drag-and-drop to function on mobile devices and iPads and had to come up with the following solution.

For the purpose of this recipe, we are going to build on the [Task re-ordering]( in the Agility Tutorial (stories have many tasks that can be re-ordered).

To app/controllers/tasks_controller.rb file, add the following:

web_method :move_higher
web_method :move_lower

To the app/models/task.rb file, add the following:

def move_higher_permitted?
editable_by?(acting_user, :position)

def move_lower_permitted?
editable_by?(acting_user, :position)

To the app/views/taglibs/application.dryml file, add the following:

<def tag="button-sortable-collection">
<collection class="button-sortable" part="button-sortable-collection" id="button-sortable-collection">
<div class="ordering-buttons">
<unless test="&first_item?">
<remote-method-button method="move_higher" if="&can_edit?" label="&uarr;" update="button-sortable-collec
<unless test="&last_item?">
<remote-method-button method="move_lower" if="&can_edit?" label="&darr;" update="button-sortable-collect

Aside: please suggest a better tag name than "button-sortable-collection".

To the public/stylesheets/application.css file, add the following:

div.ordering-buttons { float: left; color: white; margin-left: -10px; padding: 0; }

Change the app/views/stories/show.dryml file to:

<field-list: tag="editor"/>
<collection: replace>

It would be nice if this functionality could be added to the Hobo core, but it requires a better understanding of Hobo that I have.

User contributed notes

  • On September 10, 2012 Bryan Larsen said:

    Matt suggested touchpunch ( on the mailing list as a possibly less intrusive suggestion.