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

Question

我对CSS很在行，但在jQuery方面我做得很差。我们都有自己的局限..。

好了，承认了，我就开始吧。我们有一个“最喜欢的产品”表，你可以把它分成不同的类别(例如，烈性酒，绵羊，汤匙)。每个类别都是一个。每一行(不包括)都是一个产品。

我想让用户能够拖放(重新排序)表行，即使是在to之间。我看过jQuery的Table Drag and Drop (DnD)插件，但很失望地发现它并不真正支持主体之间的拖动-而且已经有很长一段时间没有更新了。

下面是基本的表结构：

<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)'

Answer 2

你研究过jQuery UI的droppable widget吗？我想知道(因为我还没有解决你的具体问题)你是否可以将你的tbody设置为droppable，将tr设置为draggable。或者可能向每个类添加一些类，以便能够指定某些行(非标题行)是可拖动的……

更新:更多的研究发现了this SO question，它链接到了关于拖拽表格行的this other article。

Answer 3

您可以通过指定以下参数来关闭表dnd插件中的可拖放性

<tr class ="nodrag nodrop">
  <th>Favourite</th>
</tr>

类nodrop nodrop将不允许拖放

和

类nodrag不会允许它被拖拽，我希望它能有所帮助。