Test Case Boilerplate

Fork this way...

HTML

<script src="http://code.jquery.com/ui/jquery-ui-git.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/jquery-ui-git.css">
<table id="test-table">
    <tbody>
    <tr>
        <td class="handle"><div class="ui-icon ui-icon-arrowthick-2-n-s" /></td>
        <td class="clickycell"><a href="#">Testing 1</a></td>
    </tr>
    <tr>
        <td class="handle"><div class="ui-icon ui-icon-arrowthick-2-n-s" /></td>
        <td class="clickycell"><a href="#">Testing 2</a></td></td>
    <tr>
        <td class="handle"><div class="ui-icon ui-icon-arrowthick-2-n-s" /></td>
        <td class="clickycell"><a href="#">Testing 3</a></td></td>
    </tr>
    </tbody>
</table>

JavaScript

$(function() {
    /* 
       Using live() because in my real code table rows are dynamically added.
       However, if I use click() instead, as in the commented-out code, it works
       fine, without any need to click twice.

    */
    // $(".clickycell a").click(function() {
    $(".clickycell a").live('click', function() {
        alert("Successful click");
        return false;
    });
    $("#test-table tbody").sortable({
        handle: "td.handle", /* Use the draggy handle to move, not the whole row */
        cursor: "move"
    }); 
});