jQuery UI 可排序函数是否同时适用于多个表

Is jQuery UI Sortable function work for more than one table simultaneously?

本文关键字：适用于 是否 UI 排序 函数 jQuery      更新时间：2023-09-26

我有一个设计，其中有多个表，在具有单个表的表上使用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 可排序函数对表"foo1"第一行进行排序时，我还想对其他两个表"foo2"和"foo3"第一行自动排序，就像"foo1"表的第一行一样。这可能吗？又如何？提前感谢...

你可以尝试这样的事情：

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

看到这个小提琴。

相关文章：