[jQuery] Strange behaviour with sortable()

[René]

(Disclaimer: Sorry for posting code -- It's as terse as I can make
it.)

I'm trying to enable sorting between tables -- drag a row within a
table to change its order, or drag a row to another table and it will
"snap" into place. In each case, after you drag-and-drop the row, the
table calls an update function. Now, if I set up the .sortable() for
each table manually, sorting works fine. Each table callsback to its
update function and reflects the current rows. E.g.,:

------------

<b>Table 1</b>
<table id="table1">
<tbody id="rows1">
<tr id="c_1" class="drag2"><td>The</td></tr>
<tr id="c_2" class="drag2"><td>quick</td></tr>
<tr id="c_3" class="drag2"><td>brown</td></tr>
<tr id="c_4" class="drag2"><td>fox</td></tr>
</tbody>
</table>

<b>Table 2</b>
<table id="table2">
<tbody id="rows2">
<tr id="d_1" class="drag2"><td>The</td></tr>
<tr id="d_2" class="drag2"><td>quick</td></tr>
<tr id="d_3" class="drag2"><td>brown</td></tr>
<tr id="d_4" class="drag2"><td>fox</td></tr>
</tbody>
</table>

<input id="make" type="button" value="Make Connectable" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jqueryui/1.5.2/jquery-ui.min.js"></script>
<script type="text/javascript">

connectable = ["#rows2","#rows1"];

$(document).ready(function() {

        $('#rows1').sortable({
                        connectWith: [connectable.join(",")],
                    update: function(e, ui) {
                        $(this).sortable("refresh");
                        items = $(this).sortable("toArray");
                        var sort_order = items.join(',');
                        $('#results').append(sort_order + "\n");
                            },
                });

        $('#rows2').sortable({
                        connectWith: [connectable.join(",")],
                    update: function(e, ui) {
                        $(this).sortable("refresh");
                        items = $(this).sortable("toArray");
                        var sort_order = items.join(',');
                        $('#results').append(sort_order + "\n");
                            },
                });
        });

</script>
<textarea id="results" rows="10" cols="40"></textarea>

-----------
But if I put the .sortable() bits inside a function (there's a reason
I want to do this), it doesn't work right. Whether I drag a row in the
first or second table, the update function only reflects the sort
order of the first table.  I can't figure out why. E.g.:
-------------

<b>Table 1</b>
<table id="table1">
<tbody id="rows1">
<tr id="c_1" class="drag2"><td>The</td></tr>
<tr id="c_2" class="drag2"><td>quick</td></tr>
<tr id="c_3" class="drag2"><td>brown</td></tr>
<tr id="c_4" class="drag2"><td>fox</td></tr>
</tbody>
</table>

<br />

<b>Table 2</b>
<table id="table2">
<tbody id="rows2">
<tr id="d_1" class="drag2"><td>The</td></tr>
<tr id="d_2" class="drag2"><td>quick</td></tr>
<tr id="d_3" class="drag2"><td>brown</td></tr>
<tr id="d_4" class="drag2"><td>fox</td></tr>
</tbody>
</table>

<input id="make" type="button" value="Make Connectable" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jqueryui/1.5.2/jquery-ui.min.js"></script>
<script type="text/javascript">

connectable = ["#rows2","#rows1"];

$(document).ready(function() {


        $('#make').click(function(){

                for (t in connectable) {
                        $(connectable[t]).sortable({
                                connectWith: [connectable.join(",")],
                            update: function(e, ui) {
                                    console.log(connectable[t]);
                                $(connectable[t]).sortable("refresh");
                                items = $(connectable[t]).sortable("toArray");
                                var sort_order = items.join(',');
                                $('#results').append(sort_order + "\n");
                                    }
                                });
                        }
                });

        });

</script>

<textarea id="results" rows="10" cols="40"></textarea>