如何将可排序单元格添加到没有其他可排序项目的表格行？

Question

尝试使用 JQuery 制作带有可排序单元格的表格。我面临的问题是，当行中没有更多可排序的单元格时，无法将单元格移入其中。我试图添加不可见的可排序单元格（到第一行），但没有帮助。

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<table>
  <tbody>
    <tr>
      <td class="ui-state-disabled"></td>
      <td class="ui-state-disabled">a</td>
      <td class="ui-state-disabled">b</td>
    </tr>
    <tr>
      <td class="ui-state-disabled">1</td>
      <td>First row: 1</td>
      <td>First row: 2</td>
      <td class=" cell-placeholder">holder</td>
    </tr>
    <tr>
      <td class="ui-state-disabled">2</td>
      <td>
        <button>
          Second row: 1
        </button>
      </td>
      <td>
        <input style="text" value="Second row: 2" />
      </td>
    </tr>
  </tbody>
</table>


$("table tbody ").sortable({
  items: 'td:not(.ui-state-disabled)',
  cancel: ".disabled",
  revert: true
}).disableSelection();

td {
  padding: 5px 10px;
  border: dotted 1px black;
}

.cell-placeholder {
  display: none;
}

这里是jsfiddle

Answer 1

您需要对 rows 元素进行排序并使用connectWith。

$("table tbody tr").sortable({
   items: 'td:not(.ui-state-disabled)',
   connectWith: "table tbody tr",
   cancel: ".disabled",
revert: true
 }).disableSelection();

td {
  padding: 5px 10px;
  border: dotted 1px black;
}

.cell-placeholder {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<table>
  <tbody>
    <tr>
      <td class="ui-state-disabled"></td>
      <td class="ui-state-disabled">a</td>
      <td class="ui-state-disabled">b</td>
    </tr>
    <tr>
      <td class="ui-state-disabled">1</td>
      <td>First row: 1</td>
      <td>First row: 2</td>
      <td class=" cell-placeholder">holder</td>
    </tr>
    <tr>
      <td class="ui-state-disabled">2</td>
      <td>
        <button>
          Second row: 1
        </button>
      </td>
      <td>
        <input style="text" value="Second row: 2" />
      </td>
    </tr>
  </tbody>
</table>