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 been dragged to the other table the tbody height decreases making it (near)impossible to drop rows back inside.

Is there a known workaround for this problem? (min-height doesn't work on a tbody element)

Many thanks in advance.

Answer 1

What you can do is create a row that is invisible to the "sortable" mechanism. Probably the easiest way to do this is with the "items" option.

Let's say your HTML looks like this

<tbody class="sortable">
    <tr><td>stuff</td></tr>
    <tr><td>stuff</td></tr>
    <tr><td>stuff</td></tr>
    <tr class="sort-disabled"><td></td></tr>
</tbody>

Then in jquery you can have

$('.sortable').sortable({
    items: ">*:not(.sort-disabled)"
});

It's a bit of a hack, but I think if you play around with variations of this (give the .sort-disabled row some height in CSS etc.) you can probably find something that works for you. You could also try having a .sort-disabled row both first and last, so that the place in the middle is the drop target.

Hope this helps!