Question

I have a page that looks like this:

<script type="text/javascript">
    $(function () {

        $('table tbody').sortable({
            update: OnSortableUpdate
        });
        $('table tbody').disableSelection();
});
</script>

<table>
<tr class="sortable-tr">
    <td>A</td>
    <td>B</td>
    <td><img src="sort.png" class="sort-handle" /></td>
</tr>
<tr class="sortable-tr">
    <td>A</td>
    <td>B</td>
    <td><img src="sort.png" class="sort-handle" /></td>
</tr>
</table>

Which works great. But I would like to sort the ‘s only using the image for each row. Now its possible to drag etc

How is that done?

Answer 1

You can use the jquery sortable attribute handle

$('table tbody').sortable({
    handle: ".handle"
});

You’d give your image the class “handle”

<div class="handle"><img src="sort.png" class="sort-handle" /></div>

And here is a Fiddle: http://jsfiddle.net/qGGhK/16/