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

我用你的 code-sn-p 给你做了一点JSFiddle，应该可以解决你的问题。 也有offical example！

HTML（示例表） 注意第一个 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");