SortableJS 在 Rails 和 StimulusJS 中序列化 例如：这是我当前的配置：

如何解决SortableJS 在 Rails 和 StimulusJS 中序列化 例如：这是我当前的配置：

我一直试图让 SortableJS 处理多个带有待办事项的列表并序列化 ID。类似于 jQuery Sortable 序列化方法的工作方式。

每个列表中的待办事项总是从 1 开始，随着待办事项的添加而增加，随着待办事项的删除而减少。

例如：

待办事项列表一包含三个待办事项

• 待办事项 5，位置：1
• 待办事项 1，位置：2
• 待办事项 9，位置：3

待办事项二有五个待办事项

• 待办事项 5，位置：1
• 待办事项 1，位置：2
• 待办事项 9，位置：3
• Todo 17，位置：4
• 待办事项 2，位置：5

我已经将 sortableJS 与 stimulusJS 一起工作。一旦添加了任何额外的列表，待办事项将继续被视为它们都属于一个列表，因此如果有 8 个待办事项（列表一中有 3 个待办事项，列表二中有 5 个待办事项），则各自的位置将是 1-8 和不是 1-3 和 1-5。

这是我当前的配置：

drag_controller.js

import {Controller} from "stimulus"
import Sortable from "sortablejs"

export default class extends Controller {
    connect() {
        this.sortable = Sortable.create(this.element,{
            animation: 150,// handle: '.fa-grip-vertical',onEnd: this.end.bind(this)
        })
    }

    end(event) {
        let id = event.item.dataset.id
        let data = new FormData()
        data.append('position',event.newIndex + 1)

        Rails.ajax({
            url: this.data.get("url").replace(":id",id),type: 'PATCH',data: data
        })
    }
}

tod​​os_controller.rb

  def sort
    authorize(:todo,:sort?)

    @todo.insert_at(params[:position].to_i)

    head(:ok)
  end

_todo_list.html.erb

<div data-controller="drag" class="list-group list-group-flush" data-drag-url="/todos/:id/sort">
    <% todo_list.todos.order(complete: :asc,position: :asc).each do |todo| %>
      <%= content_tag :div,class: 'list-group-item list-group-item-action',"data-id": todo.id do %>
      <!-- iterated todos -->
      ...
      <% end %>
    <% end %>
</div>

需要自定义排序路由作为获取序列化数据的集合。

排序操作将执行如下操作：

  def sort
    params[:todo].each_with_index do |id,index|
      Todo.where(id: id).update_all(position: index + 1)
    end

    head(:ok)
  end

我知道使用 toArray() 方法，即 this.sortable.toArray()，它将为我提供列表中的 id 数组。我不确定如何在我的 drag_controller.js 和 SortableJS 中实现它。如何从 drag_controller.js 获取序列化数据到我的排序操作？