JQuery可排序列表connectWith序列化？答案

【问题标题】：JQuery sortable lists connectWith serialize?JQuery可排序列表connectWith序列化？
【发布时间】：2017-04-13 19:53:23
【问题描述】：

我关注 Railscast 关于可排序列表的内容，它非常适合一个可排序列表。但是当我尝试创建两个连接的可排序列表时，我发现 serialize 只能存储元素的 id。有没有办法让序列化商店也为每个列表元素 id 列出列表的 id？或者将列表的元素父id相应地合并到序列化结果中？

这个答案jQuery-UI Sortable Connected-Lists save order and association to rails model 与我正在寻找的非常接近，在此之后我设法在列表之间拖动元素并成功将其保存到数据库，但是使用一个列表对元素进行排序不能正确保存。

查看

<% @project.tasks.group_by(&:column).each do |column, tasks| %>
    <ul id='tasks_<%= column %>' data-update-url='<%= sort_project_tasks_url(@project) %>'>
    <% tasks.sort_by! { |t| t.priority }.each do |task| %>
        <li id="task_<%= task.id %>">
        <%= task.name %>| <%= column %> | <b><%= task.priority %></b>
        </li>
    <% end %>
    </ul>
<% end %>

我使用的脚本纯序列化变体。

jQuery ->
    $('#tasks_done').sortable
    connectWith: '#tasks_dev'
    update: ->
        $.post($(this).data('update-url'), $(this).sortable('serialize'))

我从链接问题中得到的脚本。它也适用于在列表之间拖动元素，但在列表中排序将无法正确保存

jQuery ->
    $('#tasks_dev').sortable
    connectWith: '#tasks_done'
    update: (event, ui) ->
        neworder = new Array()
        $(this).children().each ->
            column = $(this).parent().attr('id')
            id = $(this).attr('id').match(/((?!task_).)*$/)[1]
        neworder.push(
            id: id
        column: column
        )
    $.post($(this).data('update-url'), Activity: JSON.stringify(neworder))

控制器中的相应动作（暂时没有强参数），为第二个脚本变体更新

def sort
     JSON.parse(params[:Activity]).each_with_index do |data, index|
     id = data['id']
     priority = index + 1
     column = data['column']
     column.slice! 'tasks_' # columns ids are tasks_<%= task.column %>
     task = Task.find(id)
     task.update_attributes(priority: priority, column: column)
end

所以，主要问题是：我不知道如何在一个列表中保存排序结果，同时跟踪在列表之间移动的元素。在服务器端似乎很容易做到，但我对前端缺乏经验，无法弄清楚如何在客户端正确形成参数。

【问题讨论】：

请阅读“How to Ask”和“minimal reproducible example”及其链接页面。当询问您的代码问题时，我们需要查看重复问题的最少代码。没有它，我们就不得不尝试想象您的代码，而我们无法想象出比您描述的更多的东西。
抱歉，更新了问题。

标签： jquery ruby-on-rails ruby coffeescript jquery-ui-sortable

【解决方案1】：

所以，这是我想出的解决方案。您基本上只是获取列表的 id，附加到它的 sortable('serialize') 结果并发布它。

tasks.coffee（我稍后会用 .erb 重构它）

jQuery ->
    $('#tasks_done').sortable
    connectWith: '#tasks_dev'
    update: ->
        $.post($(this).data('update-url'), 'column' + '=' + $(this).attr('id') + '&' + $(this).sortable('serialize'))

jQuery ->
    $('#tasks_dev').sortable
    connectWith: '#tasks_done'
    update: ->
        $.post($(this).data('update-url'), 'column' + '=' + $(this).attr('id') + '&' + $(this).sortable('serialize'))

tasts_controller.rb

def sort
    column = params[:column].delete! 'tasks_'
    params[:task].each_with_index do |id, index|
        Task.where(id: id).update_all(priority: index + 1, column: column)
    end
end

形成的参数： http://imgur.com/a/tHNj9

（对不起，没有足够的rep直接添加图片）

【讨论】：