jquery-ui sortable - 在列表之间移动任务

Posted 2023-05-08

【中文标题】jquery-ui sortable - 在列表之间移动任务

【英文标题】：jquery-ui sortable - moving tasks between lists

【发布时间】：2021-02-03 06:05:12

【问题描述】：

我正在尝试使用 jquery-ui sortable connected lists 并在 Rails 应用程序中保留排序更改。

列表有很多任务。 列表可以相互排序 - 有效。 任务可以相互排序 - 工作。 任务可以在列表之间移动 - 无法正常工作：

Lists/index.html.erb:

<div class="list-sortable connectedSortable" style="cursor: grab;">
  <% @lists.each do |list| %>
    <%= content_tag "div", id: "list-#list.id", data:  model_name: list.class.name.underscore, update_url: list_sort_path(list) do %>
      <%= render 'lists/list_preview', list: list %>
      <div class="task-sortable connectedSortable" style="cursor: grab;">
        <% list.tasks.rank(:row_order).each do |task| %>
          <%= content_tag "div", id: "task-#task.id", data:  model_name: task.class.name.underscore, update_url: list_task_sort_path(list, task) do %>
            <%= render 'tasks/task_preview', task: task %>
          <% end %>
        <% end %>
      </div>
    <% end %>
  <% end %>
</div>

application.js:

require("jquery-ui-dist/jquery-ui");

$(document).on('turbolinks:load', function()
  $('.list-sortable').sortable(
    cursor: "grabbing",
    //cursorAt:  left: 10 ,
    placeholder: "ui-state-highlight",
    update: function(e, ui)
      let item = ui.item;
      let item_data = item.data();
      let params = _method: 'put';
      params[item_data.modelName] =  row_order_position: item.index() 
      $.ajax(
        type: 'POST',
        url: item_data.updateUrl,
        dataType: 'json',
        data: params
      );
    ,
    stop: function(e, ui)
      console.log("stop called when finishing sort");
    
  );

  $('.task-sortable').sortable(
    cursor: "grabbing",
    //cursorAt:  left: 10 ,
    placeholder: "ui-state-highlight",
    update: function(e, ui)
      let item = ui.item;
      let item_data = item.data();
      let params = _method: 'put';
      params[item_data.modelName] =  row_order_position: item.index(), list_id: item.index() ;
      $.ajax(
        type: 'POST',
        url: item_data.updateUrl,
        dataType: 'json',
        data: params
      );
    ,
    stop: function(e, ui)
      console.log("stop called when finishing sort");
    
  );

  $( function() 
    $( ".list-sortable, .task-sortable" ).sortable(
      connectWith: ".connectedSortable"
    ).disableSelection();
   );

);

据我了解，问题出在这一行：

      params[item_data.modelName] =  row_order_position: item.index(), list_id: ??????????? ;

我无法弄清楚如何正确传递list_id（因为task 被拖到了list.id）

Github 存储库： https://github.com/yshmarov/jquery-sortable-rails

Heroku 演示： https://jquery-sortable-rails.herokuapp.com

【参考方案1】：

试试这个

<div class="chapter-sortable" style="cursor: grab;">
  <% @lists.each do |list| %>
    <%= content_tag "div", id: "list-#list.id", data:  id: list.id, model_name: list.class.name.underscore, update_url: list_sort_path(list) do %>
      <%= render 'lists/list_preview', list: list %>

      <div class="lesson-sortable" style="cursor: grab; min-height: 10px;">
        <% list.tasks.rank(:row_order).each do |task| %>
          <%= content_tag "div", id: "task-#task.id", data:  model_name: task.class.name.underscore, update_url: list_task_sort_path(list, task) do %>
            <%= render 'tasks/task_preview', task: task %>
          <% end %>
        <% end %>
      </div>
    <% end %>
  <% end %>
</div>

$(document).on('turbolinks:load', function () 
  $('.chapter-sortable').sortable(
    axis        : "y",
    cursor      : "grabbing",
    placeholder : "ui-state-highlight",

    update: function(_, ui)
      let item      = ui.item
      let itemData  = item.data()
      let params    =  _method: 'put' 

      params[itemData.modelName] =  row_order_position: item.index() 

      $.ajax(
        type     : 'POST',
        url      : itemData.updateUrl,
        dataType : 'json',
        data     : params
      )
    ,
  )

  $('.lesson-sortable').sortable(
    axis        : "y",
    cursor      : "grabbing",
    placeholder : "ui-state-highlight",
    connectWith : '.lesson-sortable',

    update: function(_, ui)
      if (ui.sender) return

      let item      = ui.item
      let itemData  = item.data()
      let listID    = item.parents('.ui-sortable-handle').eq(0).data().id
      let params    =  _method: 'put' 

      params[itemData.modelName] =  row_order_position: item.index(), list_id: listID 

      $.ajax(
        type     : 'POST',
        url      : itemData.updateUrl,
        dataType : 'json',
        data     : params
      )
    
  )
)

class ListsController < ApplicationController
  def index
    @lists = List.rank(:row_order)
  end
end

【讨论】：

关于在视图中传递list.id 的好处。您对 JS 文件所做的工作是惊人的。这就是我所向往的！ & 我只是错过了控制器中的.rank(:row_order)。谢谢！