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

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

＆＃13;

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

＆＃13;

td {
  padding: 5px 10px;
  border: dotted 1px black;
}

.cell-placeholder {
  display: none;
}

＆＃13;

<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>

＆＃13;

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

1 个答案: