通过javascript调用元素列表中的rails动作

Question

我的最终目标是让用户从列表中拖动项目并将其放在5个“桶”之一中。想象一下动物的清单，你将狗和猫拖入哺乳动物名单，将蛇和鬣蜥拖到爬行动物名单等。

使用HTML5 Sortable，我可以让某人将项目拖动到每个列表，但它不会保存更改。如何移动后，如何让javascript调用动作或路线来保存项目？

这是我的主要代码

        <% @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>

这是javascript magic $（function（）{

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

        });
    });
</script>

我尝试使用下面的代码来调用Ajax，但是如何将rails变量传递给它？这条路线会是什么样的？ $ .ajax（{type：“PUT”，url：“/ cabins / <％= cabin.id％>”}）;

Answer 1

sortable中有几个jQuery事件可以在这里使用。

1. 更改 $( ".selector" ).on( "sortchange", function( event, ui ) {} );
2. 分类 $( ".selector" ).on( "sort", function( event, ui ) {} );

请看一下这个documentation以获得进一步的帮助