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

Question

我很喜欢CSS,但我很擅长使用jQuery.我们都有自己的局限......

好的,我将开始的方式.我们有一个"最喜欢的产品"表,您可以将其分类为类别(例如,Booze,Sheep,Spoons).每个类别都是一个.每行(不包括)是一种产品.

我想让用户拖放(重新排序)表行,甚至在tbodies之间.我已经看过jQuery的Table Drag and Drop(DnD)插件但是很失望地发现它并不真正支持在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'

连接不同的表体.

该插件是为列表设计的,但它主要适用于表.我之前在桌子上成功地使用过它.

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

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

编辑:

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

items: 'tr:not(.dontIncludeMe)'