JQUERY UI对除第一个单元格之外的行进行排序

Question

我正在使用JQuery UI Sortable（）库，我正在尝试对除每行的第一个单元格之外的表行进行排序。 这可能吗？

我正在使用下面的代码来完美地拖动行：

  var fixHelperModified = function(e, tr) {
      var $originals = tr.children();
      var $helper = tr.clone();
      $helper.children().each(function(index) {
          $(this).width($originals.eq(index).width())
      });
      return $helper;
  };

  $("tbody").sortable({
      helper: fixHelperModified,
  }).disableSelection();

是否可以仅移动除第一个单元格（或列）之外的行，如果这些行有意义的话？

原因是我有一个带有ID值的输入字段，但是我不想让它随着行的其余部分移动或改变，我需要它保持正确的顺序。

要求图：

非常感谢您的帮助！

再次感谢，

Answer 1

我用你的代码片段给你一点JSFiddle来解决你的问题。 还有一个offical example！

HTML（示例表） 注意课程＆＃34;固定＆＃34;在第一个TD上：

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<TABLE id="sortable">
    <thead></thead>
    <tbody>
        <TR id="row1">
            <TD class="fixed">Data 1</TD>
            <TD>Data 2</TD>
            <TD>Data 3</TD>
            <TD>Data 4</TD>
        </TR>
        <TR id="row2">
            <TD class="fixed">Data 1</TD>
            <TD>Data 2</TD>
            <TD>Data 3</TD>
            <TD>Data 4</TD>
        </TR>
        <TR id="row3">
            <TD class="fixed">Data 1</TD>
            <TD>Data 2</TD>
            <TD>Data 3</TD>
            <TD>Data 4</TD>
        </TR>
    </tbody>
</TABLE>

添加了cancel: ".ui-state-disabled"和items: "td:not(.ui-state-disabled)"。 之后，您只需将类"ui-state-disabled"添加到您不想要排序的任何对象。 JQuery的-UI-部分：

  var fixHelperModified = function (e, tr) {
      var $originals = tr.children();
      var $helper = tr.clone();
      $helper.children().each(function (index) {
          $(this).width($originals.eq(index).width())
      });
      return $helper;
  };

  $("table tr").sortable({
      helper: fixHelperModified,
      cancel: ".ui-state-disabled",
      items: "td:not(.ui-state-disabled)"
  }).disableSelection();

  $(".fixed").addClass("ui-state-disabled");