JQuery 可排序列表 connectWith 序列化？

Question

我在 Railscast 上关注了可排序列表，它非常适合一个可排序列表。但是当我尝试创建两个连接的可排序列表时，我发现序列化只能存储元素的 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

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

Answer 1

所以，这是我想出的解决方案。你基本上只是得到列表的 id，附加到它 sortable('serialize') 结果和 post 它。

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

(抱歉，没有足够的代表直接添加图片)

JQuery 可排序列表 connectWith 序列化？

JQuery sortable lists connectWith serialize?

ruby

jquery

ruby-on-rails

jquery-ui-sortable

coffeescript