通过 javascript 从元素列表调用 rails 操作

Question

我的最终目标是让用户从列表中拖动项目并将其放置在 5 个 "buckets" 之一中。想象一下动物列表，然后将狗和猫拖到哺乳动物列表中，将蛇和鬣蜥拖到爬行动物列表中，等等。

使用 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魔法 $(函数() {

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

        });
    });
</script>

我尝试使用下面的代码来调用 Ajax，但是如何将 rails 变量传递给它？路线是什么样的？ $.ajax({ 类型："PUT"， url: "/cabins/<%= cabin.id %>" });

Answer 1

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

改变

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

排序

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

请查看此 documentation 以获得更多帮助

通过 javascript 从元素列表调用 rails 操作

Call rails action from list of elements through javascript

javascript

action

ruby-on-rails