javascript - 如何拖放表格？

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/

此外，如果您绑定(bind) <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 进行排序类