Ruby On Rails, Making a Sortable List

Question

Currently I'm working with a set of List Items that are created through Ruby. The list items are f.text_fields that allow the user to write what they want in them.

I'm having trouble making the list items sortable. Have tried multiple methods but all seem mess up the functionality of the items.

This is what i currently have, any ideas or suggestions would be greatly appreciated.

    <div class = "row Answer sortable">
    <li>
      <div class="col-sm-10 sortable">
        <%= f.text_field :body, :class => "form-control" %>
      </div>
      <div class ="col-sm-1">
        <div class = "btn btn-default inline RemoveAnswer">&times;</div>
        <%= f.hidden_field :_destroy, :class => "destroy-answer" %>
      </div>
    </li>
</div>

Thank You

Answer 1

When you say sortable (sorry can't create comments yet)

do you mean in the form, like drag-and-drop sortable, or that they show up sorted?

EDITED!

Include this in your application.js html.sortable file

Then in your JS-file for your forms class you can create the functions:

Here is mine, let me know if you know coffee-script or if you need an explanation.

ready = undefined
set_positions = undefined

// create the
set_positions = -> 
  $(".sortable-item").each (i) ->
    $(this).attr "data-pos", i + 1
    return

ready = ->
  set_positions()
  $(".sortable").sortable()
  $(".sortable").sortable().bind "sortupdate", (e, ui) ->
    updated_order = []
    set_positions() 
    $(".sortable-item").each (i) -> 
      updated_order.push
        id: $(this).data("id")
        position: i + 1
      return
    $.ajax
      type: "PUT"
      url: "/works/sort"
      data: order: updated_order 
    return
  return


$(document).ready ready 

So very fast. You need to create the data on your sortable items (data-id="<%= item.id %>" if their in an each block) so the functions knows what to send to the action sort. And change the classes, so the functions match your form.

And in the route:

...
put :sort, on: :collection

In the action sort when dragging an item you can now use the params[:order] values to update your items position.

Note! You need to run a migration on your item table, so you can store the position for each item and then when you call the items remember to sort them.

Something like this will do (in the corresponding model):

def self.sort_by_position
  sort(position: :asc) # The new attr
end

---

And remember only to call the script on your form-page. It's pretty heavy as you can see

I hope it can point you in the right direction!