JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/vader/jquery-ui.css">
<ul id="test-list">
    <li>
        <span class="handle ui-icon ui-icon-arrowthick-2-n-s" ></span><span class="clickycell"><a href="#">Testing 1</a></span>
    </li>
    <li>
        <span class="handle ui-icon ui-icon-arrowthick-2-n-s" ></span><span class="clickycell"><a href="#">Testing 2</a></span>
    </li>
    <li>
        <span class="handle ui-icon ui-icon-arrowthick-2-n-s" ></span><span class="clickycell"><a href="#">Testing 3</a></span>
    </li>
</ul>

CSS

/* Override jQuery-UI's default behaviour for the drag handle
    icons, otherwise each item splits across two lines as the span
    becomes a block element. */
.handle { display: inline-block; }

JavaScript

$(function() {
    /* 
        Version of http://jsfiddle.net/U6sgM/4/ only using a list
        rather than a table. This works fine; the table requires an
        extra click after sorting for the click event handler to 
        be called.
    */
    // $(".clickycell a").click(function() {
    $(".clickycell a").live('click', function() {
        alert("Successful click");
        return false;
    });
    $("#test-list").sortable({
        handle: ".handle", /* Use the draggy handle to move, not the whole row */
        cursor: "move"
    }); 
});