仅当拖动特定列时可排序行

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(); 
}); 

所以，我想只有当我选择的第一列的行进行排序。如果我选择第二列，则什么都不会发生。可能吗？

编辑：

我尝试什么战俘说：

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

但是，当我用类“add_story”列动一排，每排由任何列移动。

Answer 1

我能够通过向单元添加类来做到这一点。

然后，在你不想让拖在细胞中，覆盖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(); 
    }); 
}); 

example

轴y没有必要，我只是figu红色，这将是很好的。

Answer 2

您也可以使用手柄选项：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/