jQuery Forum

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