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

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.

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!

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.

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?

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.

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>');
    }
}

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.

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/

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.

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();

});

In my case it was about table and tbody collapsing to size 0x0 when no items present. What worked was providing some minimal size for the table and tbody, like this:

table.items-table {
    width: 100%; /*needed for dropping on empty table to work - can be any non-zero value*/
}

table.items-table >tbody { /*needed for dropping on empty table to work */
    display: block;
    min-height: 10px;
}

That was all that was needed.

Based on Ismael Miguel comment on Cetnar answer, here is my working solution.

• I send different ajax call for each table (urgent, normal, low priority tasks), and it works fine with empty table dropping.
• In database I update all tasks present in the array sent by ajax with a sorting column.

jQuery code :

$('.draggable-zone').sortable({
    items:       'tr.draggable',
    helper:      'clone',
    appendTo:    'body',
    connectWith: '.draggable-zone',
    update: function(e, ui) {
        $.ajax({
            url:  '/inve/new/sort', 
            type: 'POST',
            data: $(this).sortable('serialize', { 
                key: $(this).attr('data-partl')
            })
        });
    },
    receive: function(e, ui) {
        var $parent = ui.item.parent(); 
        if($parent.is('table')){
            $parent.find('tbody').append(ui.item);
        }
    }
});

HTML / Smarty template (1 table only) :

<table class="table table-striped table-hover table-bordered draggable-zone" data-partl="normal[]">
    <tbody>
        {foreach $data.normal as $task}
            <tr class="draggable" id="sort_{$task.id}">
                <td><b>{$task.title}</b></td>
                ...
            </tr>
        {/foreach}
    </body>
</table>
...