javascript - jQuery 在多个 tbodies 之间拖动(重新排序)表行

Question

我对 CSS 很在行，但我对 jQuery 的表现很差。我们都有自己的局限性...

好的，我将开始。我们有一个“最喜欢的产品”表，您可以将其分成几类(例如，酒、绵羊、勺子)。每个类别是一个 .每行(不包括 )是一个产品。

我想让用户拖放(重新排序)表行，甚至在 tbodies 之间。我看过 Table Drag and Drop (DnD) jQuery 插件，但失望地发现它并不真正支持在 tbodies 之间拖动 - 并且已经有一段时间没有更新了。

这是基本的表结构:

<table>
  <thead>
    <tr>
      <th>Favourite</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>Spoons</th> <!-- secion title, not draggable -->
    </tr>
    <tr>
      <td>Wooden Spoon</td>
    </tr>
    <tr>
      <td>Metal Spoon</td>
    </tr>
    <tr>
      <td>Plastic Spoon</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th>Nuclear Bombs</th> <!-- seciont title, not draggable -->
    </tr>
    <tr>
      <td>US Nukes</td>
    </tr>
    <tr>
      <td>Soviet Nukes</td>
   </tr>
 </tbody>
</table>

我需要关闭某些行的“可拖动性”，例如中的第一行 - 这是部分标题。

是否有更好版本的 jquery 插件可以满足我的需要？如果您能找到更好的插件，请分享并赢得我的“本周最喜欢的人”奖。

谢谢。

Answer 1

您将要使用jQueryUi 的可排序插件，然后使用选项

connectWith: '.connectedSortable'

连接不同的表体。

该插件是为列表设计的，但它主要适用于表格。我以前在 table 上成功地使用过它。

这里是关于 jquery ui 的可排序文档的链接:

http://jqueryui.com/demos/sortable/#connect-lists

编辑:

您还需要使用项目选项来指定某些行是可排序的

items: 'tr:not(.dontIncludeMe)'