1

我一直在努力让 SortableJS 处理带有 todo 的多个列表并序列化 id。类似于 jQuery Sortable 序列化方法的工作方式。

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

例如：

待办事项清单一有三个待办事项

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

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

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

我已经让 sortableJS 与stimulusJS 一起工作。一旦添加了任何其他列表，待办事项继续被视为它们都属于一个列表，因此如果有 8 个待办事项（列表 1 中的 3 个待办事项和列表 2 中的 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
        })
    }
}

todos_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()方法 ie this.sortable.toArray()，它将为我提供列表中的 id 数组。我不确定如何在我的 drag_controller.js 和 SortableJS 中实现这一点。如何从 drag_controller.js 获取序列化数据到我的排序操作？

4

0 回答 0