Draggable not showing draggable item and placing to wrong droppable

Question

I have several tables with draggable/sortable rows inside them. I want to be able to drag a row from table 1 to table 2 (or other tables). But my problem is that when I'm dragging the row it dissapears but inserts itself successfully to another table with a twist. It doesn't insert the row inside the table tbody but right into the table tags.

You can see an example here http://jsfiddle.net/netifriik/56rPa/

HTML

<div class="panel">
    <table class="table table-striped">
        <thead>
            <tr>
                <th colspan=4>My first table</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>@1</td>
                <td>Hello</td>
                <td>i'm</td>
                <td>happy</td>
            </tr>
            <tr>
                <td>@2</td>
                <td>Hi</td>
                <td>i'm</td>
                <td>positive</td>
            </tr>
            <tr class="placeholder">
                <td colspan="4">You can drag or sort rows here</td>
            </tr>
        </tbody>
    </table>
    <table class="table table-striped">
        <thead>
            <tr>
                <th colspan=4>My second table</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>@3</td>
                <td>Hello</td>
                <td>i'm</td>
                <td>neutral</td>
            </tr>
            <tr>
                <td>@4</td>
                <td>Bye</td>
                <td>i'm</td>
                <td>unimpressed</td>
            </tr>
            <tr class="placeholder">
                <td colspan="4">You can drag or sort rows here</td>
            </tr>
        </tbody>
    </table> 
</div>

Javascript

// Make table rows draggable.
$("table tbody tr:not(.placeholder)").draggable({
    axis: 'y',

});
// Here's where the draggable needs to be dropped and kept.
// The row should be sortable.
// You should not be able to sort/drag placeholder rows.
$("table tbody").droppable({
    accept: 'tr:not(.placeholder)',
    cursor: 'move',
    drop: function(event, ui) {
        var target = $(event.target);
        var draggable = ui.draggable;
        draggable.insertBefore(target);
    }
}).sortable({ items: 'tr:not(.placeholder)' });

Answer 1

jQuery

$(".panel").sortable({ 
    items: 'tr:not(.placeholder)',
    change: function(event, ui){
                if(ui.item.hasClass("temp"))
                    return false;
                if(ui.helper.parent().find('tr').length == 2)
                    ui.helper.parent().prepend('<tr class="temp"><td></td><td></td><td></td><td></td></tr>');        
     },
     update: function(event, ui){
                 ui.item.parent().find('tr.temp').remove();    
      }
});

HTML - Only change here is I added the placeholder class to your thead tr heading

<div class="panel">
    <table class="table table-striped">
        <thead>
            <tr class="placeholder">
                <th colspan=4>My first table</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>@1</td>
                <td>Hello</td>
                <td>i'm</td>
                <td>happy</td>
            </tr>
            <tr>
                <td>@2</td>
                <td>Hi</td>
                <td>i'm</td>
                <td>positive</td>
            </tr>
            <tr class="placeholder">
                <td colspan="4">You can drag or sort rows here</td>
            </tr>
        </tbody>
    </table>
    <table class="table table-striped">
        <thead>
            <tr class="placeholder">
                <th colspan=4>My second table</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>@3</td>
                <td>Hello</td>
                <td>i'm</td>
                <td>neutral</td>
            </tr>
            <tr>
                <td>@4</td>
                <td>Bye</td>
                <td>i'm</td>
                <td>unimpressed</td>
            </tr>
            <tr class="placeholder">
                <td colspan="4">You can drag or sort rows here</td>
            </tr>
        </tbody>
    </table> 
</div>

FIDDLE