// HTML
<table class="list">
  <thead>
    <tr>
      <th>A Group Table</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>A row to move between the tables</td></tr>
    <tr class="hidden"><td> </td></tr>
  </tbody>
</table>

<table class="list">
  <thead>
    <tr>
      <th>Another Group Table</th>
    </tr>
  </thead>
  <tbody>
    <tr class="hidden"><td> </td></tr>
  </tbody>
</table>


// Javascript (need jQuery and jQuery UI with Sortable and dependencies)
$('table.sortable tbody').sortable({
  cancel: '.hidden',
  connectWith: 'table.sortable tbody',

  // This was to help with height issues
  helper: function(e, ui) {
    ui.children().each(function() {
      $(this).width($(this).width());
    });
    return ui;
  },
  forcePlaceholderSize: true,
  placeholder: 'ui-state-highlight'
});


// CSS
table.sortable {
  margin-bottom: 20px;
}

table.sortable tbody {
  height: 20px;
}

table.sortable tbody tr.hidden {
  display: block;
  visibility: hidden;
						
table.sortable tbdoy tr.hidden td {
  padding: 0;
  border: 0;
  line-height: 0;
}

For some reason, sortables and tables don't go well together. But sometimes you really desperately need the structure of a table row, with the capacity to sort the rows and even move them between tables.

I've been hacking around with this all morning and finally come to a working solution that I'm satisfied with for now.

Here's the problem:

When a table is empty it has 0 height. For some reason, jQuery UI sortable plugin just doesn't cope with this. It can't see the table as a drop zone and pad it accordingly. So you have to hack around it. The code in this post is an attempt to show you how I achieved this.

The main goal was to make the tables appear empty but still retain the ability to drop items into them. At the same time I didn't want a random row appearing in strange places depending on where you drop the valid rows.

It's not perfect because when the tbody is 'empty', the tr.hidden creates a 20px 'margin' on the bottom of the table. But you can obscure this a little by adding an actual 20px margin to the bottom of the tables

Hope it helps someone :)