Javascript 可拖动未显示可拖动项目，并放置到错误的可拖放位置

我有几个表格，里面有可拖动/可排序的行。我希望能够将一行从表1拖到表2（或其他表）。 但我的问题是，当我拖动行时，它会消失，但会通过扭曲成功地将自己插入到另一个表中。它不会将行插入表tbody中，而是直接插入表标记中

你可以在这里看到一个例子

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>

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

$(".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();    
      }
});

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