jquery - 仅在拖动特定列时才可排序行

Question

选择表格的特定列时如何对行进行排序？

[...]
<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>
[...]

剧本：

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

    return ui;
};

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

因此，我希望仅在选择第一列时才对行进行排序。如果我选择第二列，则不会发生任何事情。是否可以？

编辑：

我试试 Pow 说的：

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

但是，当我按“add_story”类的列移动一行时，每一行都会被任何列移动。

Answer 1

您还可以使用句柄选项：http ://api.jqueryui.com/sortable/#option-handle

给你的第一列一个像“sortHandle”这样的类，然后在你的脚本中你可以将句柄选项设置为仅在单击该列时进行排序。

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>

这是一个例子：http: //jsfiddle.net/uWZ59/2/

Answer 2

我可以通过向单元格添加类来做到这一点。

然后在您不想允许拖入的单元格中，覆盖mousedown事件

像这样的标记：

<td class='grab'>A</td>
<td class='show'>10</td>

和这样的脚本：

$(function () {
    $("tbody").sortable({
        helper: fixHelper,
        axis: "y"
    }).disableSelection();
    $('#Table_Body').not('.add_Story').mousedown(function(event){
        event.stopImmediatePropagation();
    });
});

例子

y 轴不是必需的，我只是认为它会很好。