我正在尝试使用this GoRails episode将拖放排序功能添加到待办事项列表应用中。
使用gem 'acts_as_list'和gem 'jquery-ui-rails'可以使项目可拖放，因此从用户的角度来看，一切都很好。
问题在于新头寸没有保存在数据库中，因此在单击刷新后，订单将返回到其先前的头寸。
关于我的应用程序，唯一复杂的一点是，这是在同一页面上的几个不同的div上发生的（一次，每天，每周和每月的任务都有单独的列表）。我的index展示页面（正在发生所有事情）具有这样的基本结构：
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-6 col-lg-12">
<div class="content-box to-do">
<h2 class="font-script color-neutral text-center">One-Time Tasks</h2>
<p class="text-center color-neutral">These tasks are here to stay, until you complete them.</p>
<div id="onetime-todo"><%= render partial: 'items', locals: { task: @one_time } %></div>
<div id="onetime-done"><%= render partial: 'done', locals: { task: @one_time_done } %></div>
</div> <!-- content box -->
</div> <!-- col -->
<div class="col-xs-12 col-md-6 col-lg-4">
<div class="content-box to-do">
<h2 class="font-script color-neutral text-center">Daily</h2>
<p class="text-center color-neutral">These automatically uncheck at night so you have a fresh list in the morning.</p>
<div id="daily-todo"><%= render partial: 'items', locals: { task: @daily } %></div>
<div id="daily-done"><%= render partial: 'done', locals: { task: @daily_done } %></div>
</div> <!-- content box -->
</div> <!-- col -->
<div class="col-xs-12 col-md-6 col-lg-4">
<div class="content-box to-do">
<h2 class="font-script color-neutral text-center">Weekly</h2>
<p class="text-center color-neutral">These automatically uncheck Sunday night so you get a new list each Monday morning.</p>
<div id="weekly-todo"><%= render partial: 'items', locals: { task: @weekly } %></div>
<div id="weekly-done"><%= render partial: 'done', locals: { task: @weekly_done } %></div>
</div> <!-- content box -->
</div> <!-- col -->
<div class="col-xs-12 col-md-6 col-lg-4">
<div class="content-box to-do">
<h2 class="font-script color-neutral text-center">Monthly</h2>
<p class="text-center color-neutral">These automatically uncheck on the last day of the month so you start with a clean list each 1st.</p>
<div id="monthly-todo"><%= render partial: 'items', locals: { task: @monthly } %></div>
<div id="monthly-done"><%= render partial: 'done', locals: { task: @monthly_done } %></div>
</div> <!-- content box -->
</div> <!-- col -->
</div> <!-- row -->
</div> <!-- container -->
然后在_items.html.erb部分中发生拖放魔术：
<div class="to-do-list taskWrapper" data-url="<%= sort_tasks_path %>">
<% task.each do |task| %>
<%= link_to task, id: dom_id(task) do %>
<p>
<%= fa_icon "bars", class: "color-neutral-light", style: "margin-right: 5px;" %>
<%= link_to check_task_path(task), method: :post, remote: true do %>
<%= fa_icon "square-o", style: "margin-right: 5px;" %>
<% end %>
<span id="task-show-hide">
<span class="font-serif">
<%= task.name %>
</span>
<span>
<%= link_to task_path(task), method: :delete, remote: true do %>
<%= fa_icon "remove", id: (task.id.to_s + "task"), style: "margin-left: 5px" %>
<% end %>
</span>
</span>
</p>
<% end %> <!-- dom id wrapper -->
<% end %> <!-- task each -->
</div>
<script>
$(document).ready(function() {
$('.content-box').matchHeight();
$('.taskWrapper').sortable({
update: function(e, ui) {
Rails.ajax({
url: $(this).data("url"),
type: "PATCH",
data: $(this).sortable('serialize'),
});
}
});
});
</script>
我相关的tasks_controller方法是：
def set_variables
@user_tasks = Task.where(user_id: current_user.id)
@one_time = Task.where(frequency: "OneTime", completed: false, user_id: current_user.id).order(:position)
@one_time_done = Task.where(frequency: "OneTime", completed: true, user_id: current_user.id).order(:position)
@daily = Task.where(frequency: "Daily", completed: false, user_id: current_user.id).order(:position)
@daily_done = Task.where(frequency: "Daily", completed: true, user_id: current_user.id).order(:position)
@weekly = Task.where(frequency: "Weekly", completed: false, user_id: current_user.id).order(:position)
@weekly_done = Task.where(frequency: "Weekly", completed: true, user_id: current_user.id).order(:position)
@monthly = Task.where(frequency: "Monthly", completed: false, user_id: current_user.id).order(:position)
@monthly_done = Task.where(frequency: "Monthly", completed: true, user_id: current_user.id).order(:position)
end
def sort
params[:task].each_with_index do |id, index|
Task.where(id: id).update_all(position: index + 1)
end
head :ok
结束
最后，我的服务器日志显示如下：
Started PATCH "/tasks/sort" for 127.0.0.1 at 2018-10-20 11:16:06 -0700
Processing by TasksController#sort as */*
Parameters: {"task"=>["2", "8"]}
User Load (0.2ms) SELECT "users".* FROM "users" WHERE "users"."id" = ? ORDER BY "users"."id" ASC LIMIT ? [["id", 1], ["LIMIT", 1]]
↳ /Users/lizbayardelle/.rvm/gems/ruby-2.5.0/gems/activerecord-5.2.1/lib/active_record/log_subscriber.rb:98
Task Update All (0.2ms) UPDATE "tasks" SET "position" = 1 WHERE "tasks"."id" = ? [["id", 2]]
↳ app/controllers/tasks_controller.rb:27
Task Update All (0.1ms) UPDATE "tasks" SET "position" = 2 WHERE "tasks"."id" = ? [["id", 8]]
↳ app/controllers/tasks_controller.rb:27
Completed 200 OK in 3ms (ActiveRecord: 0.5ms)
到目前为止，localhost中没有给我任何错误（控制台或导轨），但是在Heroku上却抛出了FATAL -- : [cd6ed1ad-4095-4eb2-9f28-201ec2e74c19] 1: <div class="to-do-list taskWrapper" data-url="<%= sort_tasks_path %>">
任何人都可以帮助我确保无错误并保存在数据库中吗？