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.

<div class="ui-widget sortablecolumn">
   <table>
   </table>
</div>  

$( '.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.

Answer 2

Checkout my post about this - you can solve it by attaching a method to the click which adds height to empty containers:

function sortAndDrag() {

    //show BEFORE sortable starts
     $(".sortableClass").bind('click mousedown', function(){
          $(".sortableClass"").each(function (c) {
                if ($("tbody", this).size() == 0) {
                    $(this).addClass("aClassWhichGivesHeight")
                }
            })
     });

    //enable sortable
    $(".sortableClass").sortable({
        connectWith: ".sortableClass",
        stop: function (a, d) {
            $("tbody").removeClass("aClassWhichGivesHeight");
        }
    });

}

Something like that?

Answer 3

js

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

css

.sortable {
    background-color: silver;    
    height: 10px;
}

.sortable td { background-color: white; }

html

<table class='sortable'>    
    <tbody>
        <tr><td colspan="2" class="drop-row" style="display: none;"></td></tr>
    </tbody>    
</table>

More details and even a better code at https://devstuffs.wordpress.com/2015/07/31/jquery-ui-sortable-with-connected-tables-and-empty-rows/

Answer 4

I know this question has been marked as "answered" but I also wanted to add another way to approach this.

What I do is check if the list empty, if so, create a new row element and inject it into the tbody. I put a message like "No more items" in the td.

Once an item is dropped into the "empty" list, the empty message will be destroyed.

I use Mootools hence the lack of example code.

Answer 5

Easy solution (PURE CSS):

tbody:after {
    content:" ";
    height:30px;
}

Where the blank space is not a stardard blank space. It's an invisible blank character like the following: Invisible characters - ASCII

Worked for me in FF and Chrome.

Answer 6

i use:

$(document).ready(function(){
      $( "#sortable1 tbody, #sortable2 tbody" ).sortable({
      connectWith: ".connectedSortable",
      remove: function(event, ui){ if($(this).html().replace(/^\s+/, "") == '') { $(this).html('<tr class="tmp_tr nobr"><td colspan="7">&nbsp;</td></tr>'); }},
      update: function( event, ui ) {$(this).find('.tmp_tr').remove();},
    }).disableSelection();

});