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

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!

Answer 2

I have the same question, and managed to half solve it by doing this:

$('table').sortable(
{
    connectWith: 'table',
    items: 'tbody tr'
});

This allows me to move rows on to an empty table, and it looks fine, but the element is inserted after the tbody instead of inside it. I think Danny Robert's answer will work for me but I'd be interested in seeing a non hack solution.

Answer 3

Here's how I solved the issue with being unable to drop a tr in an empty tbody:

$(function() {

    var sort1 = $('#sort1 tbody');
    var sort2 = $('#sort2 tbody');

   sizeCheck(sort1);
   sizeCheck(sort2);

   //Start the jQuery Sortable for Active and Fresh Promo Tables
   $("#sort1 tbody, #sort2 tbody").sortable({

     items: ">*:not(.sort-disabled)",

     deactivate: function(e, ui) {

        sizeCheck(sort1);
        sizeCheck(sort2);

     },
     //Connect tables to pass data
     connectWith: ".contentTable tbody"

   }).disableSelection();

});

//Prevent empty tbody from not allowing items dragged into it

function sizeCheck(item){
    if($(item).height() == 0){
        $(item).append('<tr class="sort-disabled"><td></td></tr>');
    }
}