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