通过JavaScript从元素列表调用Rails操作

Question

My end goal is to have a user drag items from a list and place it in one of 5 "buckets". Imagine a list of animals, and you drag dogs and cats into a mammals list, and snakes and iguana to a reptile list, etc.

Using HTML5 Sortable, I am able to have someone drag the item to each list, but it doesn't save the change. How do I have javascript call the action or route to save the item once it is moved?

This is my main code

        <% @cabins.each do |cabin| %>
          <li class="highlight" draggable="true" style="display: list-item;"><%= cabin.name %>-<%= Room.where(name: cabin.name).sum(:clean_time).to_i %></li>
        <% end %>

    </ul>
    Bucket 1
    <ul id="sortable5" class="connected sortable list">
        <li class="highlight" draggable="true">Item 1
        </li><li draggable="true" class="" style="display: list-item;">Item 2
        </li><li draggable="true" class="" style="display: list-item;">Item 3
        </li><li draggable="true" class="" style="display: list-item;">Item 4
        </li><li class="highlight" draggable="true">Item 5
    </li></ul>
    Bucket 3
    <ul id="sortable5" class="connected sortable list">
        <li class="highlight" draggable="true">Item 1
        </li><li draggable="true" class="" style="display: list-item;">Item 2
        </li><li draggable="true" class="" style="display: list-item;">Item 3
        </li><li draggable="true" class="" style="display: list-item;">Item 4
        </li><li class="highlight" draggable="true">Item 5
    </li></ul>
</section>

This is the javascript magic $(function() {

        $('#sortable4, #sortable5').sortable({
            connectWith: '.connected'

        });
    });
</script>

I tried using the code below to call Ajax, but how do I pass a rails variable to it? And what would the route look like? $.ajax({ type: "PUT", url: "/cabins/<%= cabin.id %>" });

Answer 1

There are couple of jQuery events in sortable that can be used here.

1. change

    $( ".selector" ).on( "sortchange", function( event, ui ) {} ); 

2. sort

    $( ".selector" ).on( "sort", function( event, ui ) {} ); 

Please take a look at this documentation for further help