拖放集合是rails 4应用程序：如何使更改持久化？答案

【问题标题】：Drag and Drop a collection is rails 4 app: How to get changes to persist?拖放集合是rails 4应用程序：如何使更改持久化？
【发布时间】：2016-02-08 14:00:47
【问题描述】：

在我的 rails 应用程序中，我有一个包含许多 sub_tasks 的任务。在 tasks#show 页面中，我有一个表格，列出了与特定任务相关的所有 sub_tasks。

<table>
 <tbody>
    <tr>
    <% @task.sub_tasks.each do |sub_task| %>
    <td><%= sub_task.id %><td>
    <td><%= sub_task.name %><td>
    <td><%= sub_task.description %><td> 
    </tr>
</tbody>
</table>

我已经能够通过http://benw.me/posts/sortable-bootstrap-tables/ 在任务数据库上实现拖放。但是，我的问题是可以将拖放应用到 sub_tasks 表吗？

更新：添加以下内容并对列表进行排序。但是，现在无法让数组放置持续存在。

<table>
 <tbody id="sortable">
    <tr>
    <% @task.sub_tasks.each do |sub_task| %>
    <td><%= sub_task.id %><td>
    <td><%= sub_task.name %><td>
    <td><%= sub_task.description %><td> 
    </tr>
</tbody>
</table>

<script>
$(function (){
 $("#drop").sortable();
});
</script>

我知道我必须在我的任务控制器中定义一个排序方法，我想问题是如何将@tasks.subtasks 数组中的位置传递给参数以使这些更改保持不变？

【问题讨论】：

标签： jquery ruby-on-rails ruby

【解决方案1】：

如果您查看您提供的链接，就会有代码，它解释了如何按照您的要求进行操作

$('#sortable').sortable(
      axis: 'y'
      items: '.item'
      cursor: 'move'

      sort: (e, ui) ->
        ui.item.addClass('active-item-shadow')
      stop: (e, ui) ->
        ui.item.removeClass('active-item-shadow')
        # highlight the row on drop to indicate an update
        ui.item.children('td').effect('highlight', {}, 1000)
      update: (e, ui) ->
        item_id = ui.item.data('item-id')
        console.log(item_id)
        position = ui.item.index() # this will not work with paginated items, as the index is zero on every page
        $.ajax(
          type: 'POST'
          url: '/things/update_row_order'
          dataType: 'json'
          data: { thing: {thing_id: item_id, row_order_position: position } }
        )
    )

在update 函数中有负责更新位置的代码。您只需要编辑请求的 url，如果您不这样做，可能会将 item-id 属性添加到表元素。此外，您必须注意根据当前更改来更新其他元素的位置（例如，您将第一个元素移动到表格底部。所以所有其他元素都将获得位置 - 1）

【讨论】：