JQUERY UI Sorting the rows except the first cell

问题

I am using the JQuery UI Sortable() library and I am trying to sort the table rows except the first cell of each row. Is this possible?

I am using the code below which drags the rows perfectly:

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

Is it possible to only move the rows except the first cell (or column) if that's makes sense?

Reason for this is that I have an input field carrying the ID value, however I don't want this to move or change with the rest of the row, I need it to stay in the correct order.

Requirement Diagram:

Your helped is much appreciated!

Thanks again,

回答1:

I made you a little JSFiddle with your code-snippet that should fix your problem. There is a offical example too!

HTML (sample table) Note the class "fixed" on the first 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>

Added cancel: ".ui-state-disabled" and items: "td:not(.ui-state-disabled)". After that you just add the class "ui-state-disabled" to any objects that you dont want to be sorted. JQuery-UI-Part:

  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");

来源：https://stackoverflow.com/questions/26369324/jquery-ui-sorting-the-rows-except-the-first-cell

标签

html

jquery-ui

row

jquery-ui-sortable