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)
end

def move_lower_permitted?
  editable_by?(acting_user, :position)
end

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">
    <before-item:>
      <div class="ordering-buttons">
       <unless test="&first_item?">
         <remote-method-button method="move_higher" if="&can_edit?" label="&uarr;" update="button-sortable-collec
       </unless>
       <unless test="&last_item?">
         <remote-method-button method="move_lower" if="&can_edit?" label="&darr;" update="button-sortable-collect
       </unless>
      </div>
    </before-item:>
  </collection>
</def>

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:

<show-page>
  <field-list: tag="editor"/>
  <collection: replace>
    <button-sortable-collection:tasks/>
  </collection:>
</show-page>

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 (http://touchpunch.furf.com/) on the mailing list as a possibly less intrusive suggestion.