更新 SortableJS + Rails 表单的位置

Question

我看过很多关于使用 Rails + SortableJS 和通过 Ajax 更新对象位置的教程 - 但是，我在 Rails 中使用 SortableJS带有包含“位置”属性的隐藏字段的表单。

移动一个可排序组后如何更新所有元素？

// javascript/controllers/drag_controller.js

connect() {
  this.sortable = Sortable.create(this.element, {
    animation: 150,
    onEnd: this.end.bind(this)
  })
}

end(event) {
  // Update "position" field of each sortable object
  // event.newIndex works as the position of the newly moved item
}

这是嵌套的表单项：

// views/item/_form.html.erb

<%= content_tag :div, class: "nested-fields", data: { new_record: form.object.new_record? } do %>

  <div class="form-group">
    <%= form.label :name %>
    <%= form.text_field :name %>
  </div>
  <%= form.hidden_field :position %>

<% end %>

除职位字段外，该表格目前工作正常。我也在使用 acts_as_list，它会自动填写后端的位置，但不适用于使用表单编辑的用户。

Answer 1

根据我的经验，您已经在使用的 gem act_as_list 可以满足您的需要：自动更新记录。例如，在 irb 中，使用 Message 模型并销毁一条记录：

irb(main):001:0> m = Message.find 11
  Message Load (0.8ms)  SELECT "messages".* FROM "messages" WHERE "messages"."id" =  LIMIT   [["id", 11], ["LIMIT", 1]]
=> #<Message id: 11, content: "e", created_at: "2021-11-30 14:30:37.896535000 +0000", updated_at: "2021-11-30 14:41:38.871285000 +0000", position: 8>
irb(main):002:0> m.destroy
  TRANSACTION (0.4ms)  BEGIN
  Message Load (0.8ms)  SELECT "messages".* FROM "messages" WHERE "messages"."id" =  LIMIT   [["id", 11], ["LIMIT", 1]]
  Message Destroy (2.6ms)  DELETE FROM "messages" WHERE "messages"."id" =   [["id", 11]]
  Message Update All (3.0ms)  UPDATE "messages" SET "position" = ("messages"."position" - 1), "updated_at" = '2021-12-01 18:43:34.628679' WHERE (1 = 1) AND ("messages"."position" > 8)
  TRANSACTION (5.0ms)  COMMIT

可以看到控制台最后一个动作是Update All，会通过减少1.position属性来更新记录

更新 SortableJS + Rails 表单的位置

Updating position of SortableJS + Rails Form

forms

ruby-on-rails

sortablejs

stimulusjs