Question

我正在尝试构建Trello的克隆。我现在尝试在https://gorails.com/episodes/sortable-drag-and-drop之后添加拖放功能。我创建了一个tasks.js：

document.addEventListener("turbolinks:load", function () {
  $("#task").sortable({
    update: function (e, ui) {
      Rails.ajax({
        url: $(this).data("url"),
        type: "PATCH",
        data: $(this).sortable('serialize'),
      });
      console.log($(this).sortable('serialize'));
    }
  });
});

我在控制器中创建了一个sort方法，除了控制器和要发送的方法外，我没有看到任何param。

我有一个部分_tasks.html.erb和一个<div class="card" id="<%= dom_id(task) %>">（它会生成task_1之类的ID，因此拖放操作可以标识要拖放的任务）。 / p>

任务的index.html是：

<div class="row" id="task" data-url="<%= sort_tasks_path %>">
  <div class="col-md-4">
    <%= render @to_do %>
  </div>
  <div class="col-md-4">
    <%= render @doing %>
  </div>
  <div class="col-md-4">    
    <%= render @done %>
  </div>
</div>

路线是：

Rails.application.routes.draw do
  resources :tasks do
    member do
      put :change
    end
    collection do
      patch :sort
    end
  end
  ...
end

第一个问题是看到console.log($(this).sortable('serialize'));的输出为空：控制台中未打印任何内容，因此Rails无法使用tasks_controller#sort和id来调用position和res.moveToFirst()的任务。

非常感谢您的帮助！

使用Rails和JQuery进行拖放操作

0 个答案: