jQuery dragging (reordering) table rows between multiple tbodies

Question

I'm great with CSS but I largely suck at jQuery. We all have our limitations...

OK with that admission out of the way I'll begin. We have a "favourite products" table, which you can sectionalize into categories (eg, Booze, Sheep, Spoons). Each category is a . Each row (excluding the ) is a product.

I want to enable a user to drag and drop (reorder) the table rows, even between tbodies. I've looked at Table Drag and Drop (DnD) plugin for jQuery but was disappointed to find that it doesn't really support dragging between tbodies - and hasn't been updated for quite some time.

Here is the basic table structure:

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

I'm going to need to turn of the "dragability" of certain rows such as the first row in the - this being the section title.

Is there a better version of a jquery plugin out there that can do what I need? If you can find a better plugin please share and win my "favourite person of the week" award.

Thank you.

Answer 1

Have you looked into jQuery UI's droppable widget? I'm wondering (since I haven't played around with your specific problem yet) if you could set your tbody as droppable and your tr as draggable. Or possibly add some classes to each to be able to specify that certain rows (non-title rows) are draggable...

UPDATE: more research turned up this SO question, which links to this other article about dragging table rows.

Answer 2

Your going to want to use jQueryUi's sortable plugin and then use the option

connectWith: '.connectedSortable'

to connect the different table bodies.

the plugin is designed for lists, but it does work on tables, mostly. I've used it with success on a table before.

here's the link to the documentation on jquery ui's sortable:

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

EDIT:

you'll also want to use the items option to specify that certain rows are sortable

items: 'tr:not(.dontIncludeMe)'