我正在尝试使用nested_attributes实现“拖放排序列表”(https://gorails.com/episodes/rails-drag-and-drop-sortable )。
不幸的是,我弄错了:position
。即使总共应该只有三个位置,它也会从 2 跳到 5 到 7。
我认为问题在于隐藏的输入标签也被计算在内。如果这是主要问题,有什么办法解决吗?
// config/routes.rb
resources :recipes, except: :index do
resources :steps do
resource :step_position, only: :update
end
end
// app/views/recipes/_form.html.erb
<div data-controller="sortable" data-sortable-url="/recipes/:recipe_id/steps/:id/step_position">
<%= f.fields_for :steps, @recipe.steps.order(position: :asc) do |step| %>
<div data-id="<%= step.object.id %>">
<%= step.text_area :description %>
</div>
<% end %>
</div>
// app/javascript/controllers/sortable_controller.js
import { Controller } from "stimulus";
import Rails from "@rails/ujs";
import { Sortable } from "sortablejs";
export default class extends Controller {
connect() {
this.sortable = Sortable.create(this.element, {
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,
});
}
}
// app/controllers/step_positions_controller.rb
class StepPositionsController < ApplicationController
def update
@step = Step.find(params[:step_id])
authorize @step.recipe
@step.insert_at(params[:position].to_i)
head :ok
end
end