sorting tr elements with nested tables, hide nested tbody while sorting

Question

I've got a ...very... nested set of tables.

Here's my DOM:

<table id="sortable">
    <thead>...</thead>
    <tbody>
        <tr class="draggable_item">
            <td>
                <table>
                    <thead class="show_this_while_dragging">...</thead>
                    <tbody class="hide_this_while_dragging">
                        <tr>
                            <td>...</td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
</table>

Each tr in table#sortable is draggable. When it's being dragged, I want to hide the tbody in the table inside each tr.draggable_item.

Here's how I initialize my sortable:

$( selector ).sortable({
    helper: fixHelper
});

$( selector ).sortable( "option", "start", function(event, ui) { start_callback(selector) } );

function start_callback(selector)
{
    $(selector + " table tbody").hide();
}

This works almost as expected. Each tbody disappears, even the one that is being dragged. But there's extra space where the tbody was in the currently dragged item.

I am not sure what's causing it, or how to remove it. The height of the tr.draggable_item that is being dragged is locked as soon as I start dragging the item.

jsfiddle.net/ywF9E/3 - you'll notice here too, that to drag row 1 under row 2, you have to drag it under where the tbody would be if it weren't hidden. — Nick Pickering
– Nick Pickering, Commented Sep 4, 2013 at 4:22
detaching the elements as opposed to hideing them doesn't seem to have an effect. I believe the problem is with the start event. I think I want something like a beforeStart event. — Nick Pickering
– Nick Pickering, Commented Sep 4, 2013 at 5:10
My problem is similar to this I think: stackoverflow.com/questions/9804238/… — Nick Pickering
– Nick Pickering, Commented Sep 4, 2013 at 5:20

Itay · Accepted Answer · 2013-09-04 05:44:43Z

2

jsFiddle Demo

At first I'd like to say that it's clear you really put effort in finding a solution on your own so it really made me want to help.

The problem is that if you hide parts of the element after it begins to be dragged, the size isn't recalculated.

The solution is like in the code you've linked. You have to catch a more preliminary event (like mousedown) and hide it before the dragging begins.

$('tr.draggable_item').mousedown(function() {
       $(this).find("tbody").hide();
    });
$('tr.draggable_item').mouseup(function() {
       $(this).find("tbody").show();
    });

answered Sep 4, 2013 at 5:44

Itay

16.8k2 gold badges56 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nick Pickering Over a year ago

Thanks for the compliment, and you are right! That's exactly what I had to do. :]

Collectives™ on Stack Overflow

sorting tr elements with nested tables, hide nested tbody while sorting

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related