Question

真棒。

我让它与列表一起工作，但我一直试图让它与表一起工作，更具体地说是部分呈现的表。

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

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

此外，如果绑定mod(sequence1,64)*100000000000+sequence2，可排序的内容将是整个tbody html内容。

<强>更新

让我尝试对可排序的工作方式做一个简单的解释。

当您致电<table id="habits"时，您将能够对#item根目录中的每个孩子进行排序（更改位置）。

这是什么意思？

如果你有以下html：

$( "#item" ).sortable()

因此，您可以在任何级别调用<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()

中创建的任何html元素的位置

但是，假设您要对表中的行进行排序。因此，要对TR进行排序，您需要调用父html <div class="sortable_tables">。 TR的父级是tbody，所以.select()你可以使用$( ".sortable_trs" ).sortable()类

对每个tbody中的TR进行排序

如何拖拽掉桌？

1 个答案: