如何拖放表格？

Question

我关注了这个Ryan Bates tutorial。

太棒了。

我让它与列表一起使用，但我一直在尝试让它与表格一起使用，更具体地说是部分呈现的表格。

<table id="habits" data-update-url="<%= sort_habits_url %>">
  <% @habits.each do |habit| %>
    <tbody id="habit_<%= habit.id %>">
      # 2 tr's & 7 td's
    </tbody>
  <% end %>
</table>

在上面的版本中，迭代是表格的倍数，因为我正在使用 <% rendered @habits %> 从主页呈现这个部分，所以我不应该包含 <% @habits.each do |habit| %> 行。

所以我尝试了这个：

<table id="habits" data-update-url="<%= sort_habits_url %>">
  <tbody id="habit_<%= habit.id %>">
    # 2 tr's & 7 td's
  </tbody>
</table>

但是只有第一个表可以被拖动。在第一个示例代码中，只能拖放表的第一次迭代。

habit-sort.js.coffee

jQuery ->
  $('#habits').sortable(
    axis: 'y'
    update: ->
      $.post($(this).data('update-url'), $(this).sortable('serialize'))
  );

Answer 1

如果尝试处理多个 DOM，则不能使用 DOM ID。因此，您需要按类替换 id。

使用多个 tbody 并对每个 tbody 内的 TR 进行排序：http://jsfiddle.net/aron_aron/1jjhdtj2/2/

另外，如果你绑定<table id="habits"，可排序的内容将是整个tbody html内容。

更新

让我试着简单解释一下 sortable 的工作原理。

当您调用$( "#item" ).sortable() 时，您将能够对#item 根目录中的每个子项进行排序（更改位置）。

什么意思？

如果你有以下html：

<div class="sortable_tables">
    <table class="sortable_bodys">
        <tbody class="sortable_trs">
          <tr class="sortable_tds">
              <td>ID 1</td>
              <td>Item Name 1</td>
              <td>Action</td>
          </tr>
          <tr>

因此，您可以在任何级别调用.sortable()，具体取决于预期的行为。

例如，如果您想对整个表格进行排序，只需调用$( ".sortable_tables" ).sortable()，这样您就可以更改在<div class="sortable_tables"> 中创建的任何html 元素的位置

但是，假设您要对表中的行进行排序。因此，要对 TR 进行排序，您需要调用父 html .select()。 TR 的父级是一个 tbody，所以 $( ".sortable_trs" ).sortable() 您将能够使用 sortable_trs 类对每个 tbody 内的 TR 进行排序