Question

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

您可以在此处查看示例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 - 仅在此处更改，我将placeholder课程添加到您的thead tr标题

<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

可拖动不显示可拖动项目并放置错误的droppable

1 个答案: