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

Question

I have a design where more then one table ,there have use jQuery UI Sortable function on table with single table it's work correctly but i would like to when i select or sortable work on row of first table also sort other table row ,like first table row dragged and dropped in first table in other table row who have same index of first table row index also performer sortable operation simultaneously. All table have same number of row
just like i have three table as per below ,

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

when i sort using jQuery UI Sortable function to sort table "foo1" first row i would like to also sort other two table "foo2"and"foo3" first row sort automatically as like fist row of "foo1" table . Can this possible ? and how? thanks in advance ...

Ferret · Accepted Answer · 2014-12-05T08:40:04.970

You could try something like:

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

See this fiddle.

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

1 Answers1