CODEWITHSUNDEEP
jqueryhtmljquery-uiuser-interfacejquery-ui-sortable
user210437
user210437

Reputation:

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.

Upvotes: 24

Views: 11150

Answers (12)

orenishi
orenishi

Reputation: 1

I solved this basically copying the jqueryui sortable demo, i saw that they added a 5px padding to their empty list

https://jqueryui.com/sortable/#empty-lists

i added 1px padding, it's not naked-eye-appreciable but it's enough to enable the drop zone placeholder trigger, which allows me, that is to say, to drop.

Upvotes: 0

Meloman
Meloman

Reputation: 3712

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.

3 tables sortable with tr and sorted in database

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>
...

Upvotes: 0

Woody
Woody

Reputation: 49

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?

Upvotes: 4

ed22
ed22

Reputation: 1237

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.

Upvotes: 0

Becario Senior
Becario Senior

Reputation: 714

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.

Upvotes: 1

Adauto
Adauto

Reputation: 569

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/

Upvotes: 1

user3094581
user3094581

Reputation: 1

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

});

Upvotes: 0

user564448
user564448

Reputation: 387

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.

Upvotes: 2

Devin Walker
Devin Walker

Reputation: 540

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

Upvotes: 2

cetnar
cetnar

Reputation: 9415

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.

Upvotes: 8

Matt
Matt

Reputation: 3848

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.

Upvotes: 4

Danny Roberts
Danny Roberts

Reputation: 3572

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!

Upvotes: 15

Related Questions