Question

目前我正在处理一组通过Ruby创建的列表项。列表项是f.text_fields，允许用户在其中写下他们想要的内容。

我无法将列表项排序。尝试了多种方法，但似乎都搞乱了这些项目的功能。

这是我目前所拥有的，任何想法或建议将不胜感激。

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

谢谢

Answer 1

当你说可排序时（抱歉还不能创建评论）

你的意思是在表单中，如拖放可排序，还是它们显示排序？

EDITED！

将此信息包含在您的application.js html.sortable file

中

然后在您的表单类的JS文件中，您可以创建函数：

这是我的，如果你知道咖啡脚本或者你需要解释，请告诉我。

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

非常快。您需要在可排序项目上创建数据（data-id =＆＃34;＆lt;％= item.id％＆gt;＆＃34;如果它们位于每个块中），那么函数知道要将哪些内容发送到操作sort。并更改类，因此函数与您的表单匹配。

在路线中：

...
put :sort, on: :collection

在拖动项目的动作sort中，您现在可以使用参数[：order]值来更新项目位置。

注意！ 您需要在项目表上运行迁移，这样您就可以存储每个项目的位置，然后在调用项目时记住对它们进行排序。

这样的事情会做（在相应的模型中）：

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

请记住只在您的表单页面上调用脚本。你可以看到它非常沉重

Ruby On Rails，制作可排序列表

1 个答案:

EDITED！

我希望它可以指出你正确的方向！