jQuery sortable如何更改表结构中的perv / next item posistion

Question

我正在使用jQuery ui sortable对所有td元素以及具有特定类的父tr元素进行排序。父级tr元素排序工作正常。但是，在对td元素进行排序时，先前的td元素将移动到放置的项目旁边。

如何更改上一个td元素的位置以使其不移至下一个位置？

总之，排序时如何强制位置在td元素之间交换？

JS fiddle

HTML代码

<table id="repeatable-fieldset-one" width="100%" class="ui-sortable">
  <thead>
    <tr>
      <th width="4%">Remove Row</th>
      <th width="20%">Name</th>
      <th width="40%">PDF</th>
    </tr>
  </thead>
  <tbody>
    <tr class="main_row main_row_static indexid_0" data-mainindex="0" data-totalpdfurlcount="5">
      <td>
        <a class="button remove-row" href="javascript:void(0)">
          <span class="dashicons dashicons-no-alt"></span>
        </a>
      </td>
      <td>
        <input type="text" class="widefat" name="repeatable_fields[0][name]" value="First">
      </td>
      <td class="pdf_data" data-count_pdf="0">
        <input type="text" id="count_pdf_input-0" class="widefat widefatpdfs upload_image1" name="repeatable_fields[0][url][]" value="1">
        <input class="upload_image_button" data-count_pdf="0" type="button" value="Select PDF">
        <a class="button add-pdf" href="javascript:void(0)">
          <span class="dashicons dashicons-plus"></span>
        </a>
        <a class="button remove-pdf" href="javascript:void(0)">
          <span class="dashicons dashicons-no-alt"></span>
        </a>
      </td>
    </tr>
    <tr class="sub_pdf_files indexid_0">
      <td></td>
      <td></td>
      <td class="pdf_data_inner">
        <input type="text" class="widefat widefatpdfs upload_image1 removepdf" name="repeatable_fields[0][url][1]" value="1.1">
        <input class="upload_image_button removepdf" data-daynamicadded="true" type="button" value="Select PDF">
        <a class="button remove-pdf" href="javascript:void(0)">
          <span class="dashicons dashicons-no-alt"></span>
        </a>
      </td>
    </tr>
    <tr class="sub_pdf_files indexid_0">
      <td></td>
      <td></td>
      <td class="pdf_data_inner">
        <input type="text" class="widefat widefatpdfs upload_image1 removepdf" name="repeatable_fields[0][url][2]" value="1.2">
        <input class="upload_image_button removepdf" data-daynamicadded="true" type="button" value="Select PDF">
        <!--a class="button add-pdf" data-daynamic='true' href="#">+</a>-->
        <a class="button remove-pdf" href="javascript:void(0)">
          <span class="dashicons dashicons-no-alt"></span>
        </a>
      </td>
    </tr>
    <tr class="sub_pdf_files indexid_0">
      <td></td>
      <td></td>
      <td class="pdf_data_inner">
        <input type="text" class="widefat widefatpdfs upload_image1 removepdf" name="repeatable_fields[0][url][3]" value="1.3">
        <input class="upload_image_button removepdf" data-daynamicadded="true" type="button" value="Select PDF">
        <a class="button remove-pdf" href="javascript:void(0)">
          <span class="dashicons dashicons-no-alt"></span>
        </a>
      </td>
    </tr>
    <tr class="sub_pdf_files indexid_0">
      <td></td>
      <td></td>
      <td class="pdf_data_inner">
        <input type="text" class="widefat widefatpdfs upload_image1 removepdf" name="repeatable_fields[0][url][4]" value="1.4">
        <input class="upload_image_button removepdf" data-daynamicadded="true" type="button" value="Select PDF">
        <!--a class="button add-pdf" data-daynamic='true' href="#">+</a>-->
        <a class="button remove-pdf" href="javascript:void(0)">
          <span class="dashicons dashicons-no-alt"></span>
        </a>
      </td>
    </tr>
  </tbody>        

  <tbody>         
    <tr class="main_row main_row_static indexid_1" data-mainindex="1" data-totalpdfurlcount="6">
      <td>
        <a class="button remove-row" href="javascript:void(0)">
          <span class="dashicons dashicons-no-alt"></span>
        </a>
      </td>
      <td>
        <input type="text" class="widefat" name="repeatable_fields[1][name]" value="Second">
      </td>
      <td class="pdf_data" data-count_pdf="1">
        <input type="text" id="count_pdf_input-1" class="widefat widefatpdfs upload_image1" name="repeatable_fields[1][url][]" value="2">
        <input class="upload_image_button" data-count_pdf="1" type="button" value="Select PDF">
        <a class="button add-pdf" href="javascript:void(0)">
          <span class="dashicons dashicons-plus"></span>
        </a>
        <a class="button remove-pdf" href="javascript:void(0)">
          <span class="dashicons dashicons-no-alt"></span>
        </a>
      </td>
    </tr>
    <tr class="sub_pdf_files indexid_1">
      <td></td>
      <td></td>
      <td class="pdf_data_inner">
        <input type="text" class="widefat widefatpdfs upload_image1 removepdf" name="repeatable_fields[1][url][1]" value="2.1">
        <input class="upload_image_button removepdf" data-daynamicadded="true" type="button" value="Select PDF">
        <!--a class="button add-pdf" data-daynamic='true' href="#">+</a>-->
        <a class="button remove-pdf" href="javascript:void(0)">
          <span class="dashicons dashicons-no-alt"></span>
        </a>
      </td>
    </tr>
    <tr class="sub_pdf_files indexid_1">
      <td></td>
      <td></td>
      <td class="pdf_data_inner">
        <input type="text" class="widefat widefatpdfs upload_image1 removepdf" name="repeatable_fields[1][url][2]" value="2.3">
        <input class="upload_image_button removepdf" data-daynamicadded="true" type="button" value="Select PDF">
        <!--a class="button add-pdf" data-daynamic='true' href="#">+</a>-->
        <a class="button remove-pdf" href="javascript:void(0)">
          <span class="dashicons dashicons-no-alt"></span>
        </a>
      </td>
    </tr>
    <tr class="sub_pdf_files indexid_1">
      <td></td>
      <td></td>
      <td class="pdf_data_inner">
        <input type="text" class="widefat widefatpdfs upload_image1 removepdf" name="repeatable_fields[1][url][3]" value="2.4">
        <input class="upload_image_button removepdf" data-daynamicadded="true" type="button" value="Select PDF">
        <!--a class="button add-pdf" data-daynamic='true' href="#">+</a>-->
        <a class="button remove-pdf" href="javascript:void(0)">
          <span class="dashicons dashicons-no-alt"></span>
        </a>
      </td>
    </tr>
    <tr class="sub_pdf_files indexid_1">
      <td></td>
      <td></td>
      <td class="pdf_data_inner">
        <input type="text" class="widefat widefatpdfs upload_image1 removepdf" name="repeatable_fields[1][url][4]" value="2.5">
        <input class="upload_image_button removepdf" data-daynamicadded="true" type="button" value="Select PDF">
        <!--a class="button add-pdf" data-daynamic='true' href="#">+</a>-->
        <a class="button remove-pdf" href="javascript:void(0)">
          <span class="dashicons dashicons-no-alt"></span>
        </a>
      </td>
    </tr>
    <tr class="sub_pdf_files indexid_1">
      <td></td>
      <td></td>
      <td class="pdf_data_inner">
        <input type="text" class="widefat widefatpdfs upload_image1 removepdf" name="repeatable_fields[1][url][5]" value="2.6">
        <input class="upload_image_button removepdf" data-daynamicadded="true" type="button" value="Select PDF">
        <!--a class="button add-pdf" data-daynamic='true' href="#">+</a>-->
        <a class="button remove-pdf" href="javascript:void(0)">
          <span class="dashicons dashicons-no-alt"></span>
        </a>
      </td>
    </tr>

  </tbody>
</table>

js代码

$("#repeatable-fieldset-one").sortable({
  items: "tbody",
  handle: ".main_row_static"
});


$("tbody").sortable({
  items: "tr > td:last-child",
  update: function(event, ui){
    },
  stop: function(event, ui) {
    if ($(ui.item).parent('.main_row').length > 0) {
        var get_pdf_count = $(ui.item).parent('.main_row').attr('data-mainindex');
         $(ui.item).switchClass('pdf_data_inner', 'pdf_data');
       $(ui.item).attr("data-count_pdf", get_pdf_count);
    } else {
             $(ui.item).switchClass('pdf_data', 'pdf_data_inner');
         $(ui.item).removeAttr("data-count_pdf");
    }

  }
});

Answer 1

您必须对行进行整体排序，否则要排序的td将与另一个td放在同一行中。

因此，将items: "tr > td:last-child"更改为items: "tr:not(.main_row)。

[如果要将这些项目分类到另一个正文中，比如说要将2.1放在1.1之前，则可以使用选项connectWith: 'tbody'。

这里已更新fiddle