Sortable table rows with ajax helper

Most examples for drag&drop sorting with the ajax helper use lists (<ul>, <ol>) to demonstrate, but if you have several columns each row, you really would like to use a table and drag&drop it’s rows.

There is a solution mentioned at script.aculo.us, where you just have to use the HTML 4.0 specified table looking like:

<table>
  <thead><tr><td></td></tr></thead>
  <tfoot><tr><td></td></tr></tfoot>
  <tbody><tr><td></td></tr></tbody>
</table>

Now you can use the tbody as parent in the ajax sortable function and set the ‘tag’-option to ‘tr’.Here is a small example in cakePHP:

<table>
  <thead>
 <tr><th>Sortable Table</th></tr>
  </thead>
  <tbody id="sortable_table">
 <tr><td>row 1</td></tr>
 <tr><td>row 2</td></tr>
 <tr><td>row 3</td></tr>
  </tbody>
</table>

<?php echo $ajax->sortable('sortable_table', array('tag' => 'tr')); ?>

Because the table rows are not set to float, you don’t see any moving effect while dragging a row. I found no way to make it float without the table beeing messed up.