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-which--做您需要的事情:自动更新记录。例如，在irb中，使用Message模型并销毁一条记录：

irb(main):001:0> m = Message.find 11
  Message Load (0.8ms)  SELECT "messages".* FROM "messages" WHERE "messages"."id" = $1 LIMIT $2  [["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" = $1 LIMIT $2  [["id", 11], ["LIMIT", 1]]
  Message Destroy (2.6ms)  DELETE FROM "messages" WHERE "messages"."id" = $1  [["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属性来更新记录。