如何拖放表格？

Question

我遵循了Ryan Bates教程 。

真棒。

我可以將其與列表一起使用，但是我一直在嘗試使其與表一起使用，更具體地說，是與部分表一起顯示的表。

<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| %> <% @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。

處理多個圖元並在每個圖元中對TR進行排序： http : //jsfiddle.net/aron_aron/1jjhdtj2/2/

另外，如果您綁定<table id="habits" ，則可排序內容將是整個tbody html內容。

更新

讓我嘗試對可排序的工作方式做一個簡單的解釋。

當您調用$( "#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進行sortable_trs