jQuery UI Sortable功能是否同时适用于多个表?

时间:2014-12-05 08:03:28

标签: javascript jquery jquery-ui jquery-ui-draggable jquery-ui-sortable

我有一个设计,其中有一个以上的表,有一个表使用jQuery UI可排序功能与单个表它正常工作但我想当我选择或可排序的工作在第一个表的行也排序其他表行,如第一个表行拖放在其他表行中的第一个表中,具有相同索引的第一个表行索引也同时执行者可排序操作。所有表格的行数相同 就像我有三张桌子一样,

<table id="foo1">
<tbody>
    <tr>
        <td>First row</td>
    </tr>
    <tr>
        <td>Second row</td>
    </tr>
</tbody>

<table id="foo2">
<tbody>
    <tr>
        <td>First row</td>
    </tr>
    <tr>
        <td>Second row</td>
    </tr>
</tbody>

<table id="foo3">
<tbody>
    <tr>
        <td>First row</td>
    </tr>
    <tr>
        <td>Second row</td>
    </tr>
</tbody>


当我使用jQuery UI Sortable函数对表进行排序&#34; foo1&#34;第一行我想对其他两个表&#34; foo2&#34;和#34; foo3&#34;进行排序。第一行自动排序,如第一行&#34; foo1&#34;桌子。 这有可能吗?如何? 提前谢谢......

1 个答案:

答案 0 :(得分:0)

您可以尝试以下方式:

var indexOld = 0,
    indexNew;
$( "#foo1 tbody" ).sortable({
    start: function(e, ui) {
        indexOld = ui.item.index();
    },
    update: function(e, ui) {
        indexNew = ui.item.index();
        if(indexOld > indexNew) {
            $('#foo2 tr').eq(indexOld).insertBefore($('#foo2 tr').eq(indexNew));
        } else {
            $('#foo2 tr').eq(indexOld).insertAfter($('#foo2 tr').eq(indexNew));
        }
    }
});

请参阅this fiddle