Rails + StimulusJS下SortableJS多待办列表ID序列化独立排序咨询

核心规则与现有问题 #

• 目标规则：每个待办列表内部的待办位置从1开始独立计数，新增、删除、拖拽后自动维护位置连续
• 当前故障点：页面存在多个独立待办列表时，系统会将所有待办的位置做全局连续计算（比如两个列表共8个待办，位置被算成1-8），而非按列表独立维护各自的1-3、1-5区间
• 可用基础能力：SortableJS 提供的toArray()方法可以直接获取当前绑定列表内所有待办的ID数组，序列化提交的效果与jQuery Sortable的serialize方法一致，可直接对接批量排序的后端接口

现有实现的问题根源 #

原实现采用「单拖拽项单独更新位置」的逻辑：

• 拖拽结束时仅把当前被拖动项的新索引发给后端，只更新这一个待办的位置值
• 没有同步当前列表其他待办的位置调整，跨列表拖拽时也不会做列表归属校验，最终导致数据库内的位置值全局串扰
• 没有利用Sortable实例的列表隔离能力，每个列表的Sortable实例只会读取自身容器内的子元素，完全可以实现按列表独立拉取顺序数据

前端 Stimulus 拖拽控制器改造 #

将原单条发请求的逻辑替换为「当前列表全量顺序序列化提交」的逻辑：

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

export default class extends Controller {
    connect() {
        this.sortable = Sortable.create(this.element, {
            animation: 150,
            onEnd: this.end.bind(this)
        })
    }

    end() {
        // 调用Sortable原生方法获取当前列表的全量待办ID数组
        // 方法默认读取子元素的data-id属性，与模板中的待办ID属性完全匹配
        const todoOrder = this.sortable.toArray()
        const data = new FormData()

        // 按Rails参数格式拼装数组，对应后端的params[:todo]结构
        todoOrder.forEach((id, index) => {
            data.append(`todo[${index}]`, id)
        })

        Rails.ajax({
            // 替换为集合级批量排序的路由地址
            url: this.data.get("sortUrl"),
            type: 'PATCH',
            data: data
        })
    }
}

适配提示：如果项目中待办项的ID存储属性不是默认的data-id，可在Sortable初始化时增加配置dataIdAttr: '你的自定义属性名'即可兼容。

模板层适配 #

将原单条更新用的占位URL，替换为批量排序的固定路由：

<div data-controller="drag" class="list-group list-group-flush" data-drag-sort-url="/todos/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 %>
      <!-- 渲染单个待办项 -->
      ...
      <% end %>
    <% end %>
</div>

后端排序逻辑适配 #

替换原单条插入位置的处理逻辑，接收前端传的数组后批量更新当前列表所有待办的位置：

def sort
  authorize(:todo, :sort?)
  # 遍历前端传的顺序数组，按索引从1开始赋值位置
  params[:todo].each_with_index do |id, index|
    Todo.where(id: id).update_all(position: index + 1)
  end

  head(:ok)
end

方案效果说明 #

• 每个待办列表单独绑定一个独立的Stimulus控制器实例，对应的Sortable实例仅能读取自身容器内的待办元素，从根源上避免跨列表数据串扰
• 每次拖拽结束触发回调时，拉取的永远是当前所属列表的全量待办顺序，后端只更新这批待办的位置值，其他列表的位置完全不受影响
• 最终实现的位置规则完全匹配需求：3个待办的列表位置自动维护为1-3，5个待办的列表位置自动维护为1-5，不会出现全局连续计数的问题

内容的提问来源于stack exchange，提问作者bradbajuz