Ruby On Rails，制作可排序列表

Posted 2023-05-08

【中文标题】Ruby On Rails，制作可排序列表

【英文标题】：Ruby On Rails, Making a Sortable List

【发布时间】：2017-12-08 07:17:29

【问题描述】：

目前我正在使用一组通过 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>

谢谢

【参考方案1】：

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

您是指在表单中，如拖放排序，还是它们显示为排序？

已编辑！

在你的 application.js 中包含这个 html.sortable file

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

这是我的，如果你知道 coffee-script 或者需要解释，请告诉我。

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=""），以便函数知道要发送到操作 sort 的内容。并更改类，使函数与您的表单匹配。

在路线中：

...
put :sort, on: :collection

在动作sort 中拖动项目时，您现在可以使用 params[:order] 值来更新项目位置。

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

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

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

---

记住只调用表单页面上的脚本。如您所见，它很重

希望它能为您指明正确的方向！

【讨论】：

对不起，应该已经澄清了更多，所以整个元素应该是拖放的。然后，一旦用户将一个元素拖到另一个元素上并释放它，这两个元素应该在列表中交换位置。

好的。我今天已经实现了！ :) 我会编辑我的答案。