Jquery ui-sortable - unable to drop tr in empty tbody

Question

I have two connected tbody elements allowing me to drag rows between two tables. Everything works fine until all rows are removed from either table.

When all rows have

Answer 1

It's hard to force table esp. tbody to have height while it's empty. So I did it in following way.

   
  

$( '.sortablecolumn').sortable(
{
   connectWith: '.sortablecolumn',
   items: 'table > tbody > *',
   receive: function(ev, ui) {
        ui.item.parent().find('table > tbody').append(ui.item);
   }
});
$( '.sortablecolumn' ).disableSelection();

Key aspects are items selector and receive event handler where added item is moved into table body.

Now it works fine.