How can I add a drag icon to a table to make it sortable with jQuery UI sortable?
<p>I use the following to allow me to sort rows in a table. </p>

<pre><code>$('#grid tbody').sortable({      
        helper: function (e, ui) {  
            ui.children().each(function () {  
                $(this).width($(this).width());  
            });  
            return ui;  
        },  
        scroll: true,  
        stop: function (event, ui) {  
            //                   
        }  
    }).disableSelection();
</code></pre>

<p>But the problem is now I can't make changes to the table. Here's an example. </p>

<p>Note that this is just an example. My real table has input fields so the user can enter input data. This is the reason that I can't just use disableSelection.</p>

<pre><code>&lt;table id="grid" &gt;
    &lt;tbody&gt;
        &lt;tr&gt;&lt;td&gt;A&lt;/td&gt;&lt;td&gt;1&lt;/td&gt;&lt;/tr&gt;
        &lt;tr&gt;&lt;td&gt;B&lt;/td&gt;&lt;td&gt;2&lt;/td&gt;&lt;/tr&gt;
        &lt;tr&gt;&lt;td&gt;C&lt;/td&gt;&lt;td&gt;3&lt;/td&gt;&lt;/tr&gt;
        &lt;tr&gt;&lt;td&gt;D&lt;/td&gt;&lt;td&gt;4&lt;/td&gt;&lt;/tr&gt;
        &lt;tr&gt;&lt;td&gt;E&lt;/td&gt;&lt;td&gt;5&lt;/td&gt;&lt;/tr&gt;
    &lt;/tbody&gt;
&lt;/table&gt;
</code></pre>

<p>Does anyone know how I can make it so an up/down arrow appears for me to use as a drag handle for sorting? Hopefully using the jQuery UI icons.</p>
