Sortable rows only when a specific column is dragged

Question

How can I sort a row when a select a specific column of a table?

[...]
<tbody id="table_body">
    <tr>
        <td>A</td>
        <td>10</td>
    </tr>
    <tr>
        <td>B</td>
        <td>8</td>
    </tr>
    <tr>
        <td>T</td>
        <td>12C</td>
    </tr>
</tbody>
[...]

The script:

var fixHelper = function (e, ui) {
    ui.children().each(function () {
        $(this).width($(this).width());
    });

    return ui;
};

$(function () {
    $("#table_body").sortable({
        helper: fixHelper
    }).disableSelection();
});

So, I want that the rows be sorted only when I select the first column. If I select the second column, nothing happens. Is it possible?

EDIT:

I try what Pow says:

$('#table_body td').mousedown(function (event) {
    if ($(this).attr("class") != "add_story") {
        event.stopImmediatePropagation();
    }
});

But when I move one row by the column with class "add_story", every row is moved by any column.

Answer 1

You can also use the handle option: http://api.jqueryui.com/sortable/#option-handle

Give your first columns a class like "sortHandle", then in your script you can set the handle option to only sort when that column is clicked.

var fixHelper = function (e, ui) {
    ui.children().each(function () {
        $(this).width($(this).width());
    });

    return ui;
};

$(function () {
    $("#table_body").sortable({
        helper: fixHelper,
        handle: '.sortHandle',
    }).disableSelection();
});

HTML:

   <tbody id="table_body">
        <tr>
            <td class="sortHandle">A</td>
            <td>10</td>
        </tr>
        <tr>
            <td class="sortHandle">B</td>
            <td>8</td>
        </tr>
        <tr>
            <td class="sortHandle">T</td>
            <td>12C</td>
        </tr>
    </tbody>

Here's an example: http://jsfiddle.net/uWZ59/2/