如何将 sortable 单元格添加到没有其他 sortable 项目的 table 行？

Question

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

<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

您需要对行元素进行排序并使用 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>

如何将 sortable 单元格添加到没有其他 sortable 项目的 table 行？

How to add sortable cell to table row where is no other sortable items?

jquery

html-table

jquery-ui-sortable