使 HTML 表格中的整行和列可拖放？

Question

我有一个基本的 HTML 表格，启用了 jQuery 的 sortable 来对表格行进行排序。 (Codepen for the table; code is below)

我的最终目标是允许用户根据需要拖放行和/或列。我知道connectWith option 可以传递给可排序的，但它似乎使所有单独的 td 单元格都可以移动 - 我只希望它适用于整个列或整个行（而不是单个单元格）。

我看过 jQuery-ui 的 sortable API documentation，但我很难弄清楚它是如何工作的；我不确定基本的可排序类是否可以处理这样的场景，或者我是否需要构建一些外部 javascript 来实现这一点。

如果我需要使用自己的 javascript，这不是问题 - 问题是，我什至不知道从哪里开始（它会由事件侦听器处理吗？）。我不是在找人来为我解决问题 - 但好奇是否有人知道基本可排序类是否可以实现这种事情，如果没有（如果我需要构建自己的 js 来做到这一点），可以你指出了我从哪里开始的正确方向，因为我真的不确定。

表格 HTML：

<table class="mytable">
  <caption>My Table</caption>
  <tr>
    <td id="corner"></td>
    <th scope="col">Col I</th>
    <th scope="col">Col .II</th>
    <th scope="col">Col .III</th>
  </tr>
  <tr class="sortme">
    <th scope="row">Row I</th>
    <td>Open</td>
    <td>Open</td>
    <td>Open</td>
  </tr>
  <tr class="sortme">
    <th scope="row">Row II</th>
    <td>Open</td>
    <td>Open</td>
    <td>Closed</td>
  </tr>
   <tr class="sortme">
    <th scope="row">Row III</th>
    <td>Open</td>
    <td>Open</td>
    <td>Closed</td>
  </tr>
</table>   

jquery:

$(function() {
    $( "tbody" )
        .sortable({items: "tr.sortme" });
});

编辑：我已经用DataTables 解决了这个问题。它将同时对行和列进行重新排序。 (Working codepen.) 用法非常简单。阅读basic installation instructions 以了解您需要哪些脚本，download them (make sure to check 'ColReorder' and 'RowReorder' under the 'extensions' section)然后按如下方式初始化您的表：

<script>
  $(document).ready( function () {
    $('#myTable').DataTable({
      searching: false,
      ordering:  false,
      rowReorder: true,
      colReorder: true,
    });
 });
</script>

就这么简单。请注意，我将 'searching' 和 'ordering' 选项设置为 false，因为在我的情况下我不希望表中包含这些功能 - 您不需要提供这些功能，您可能会发现这些功能很有用。

需要牢记的重要事项：上面发布的 HTML 不能与 DataTables 一起使用。它有两个问题。 (1) 在行中使用标签（作为行标签，或我写过<th scope="row">Row III</th> 的示例）将不起作用。相反，我把它们变成了标签，然后它就起作用了。 (2) 此外，您的表格必须有 <thead> 和 <tbody> 才能使 DataTables 工作（请参阅 this section of the install guide which mentions that.)。

最后，我想提一下，我发现在初始化 DataTables 时提供以下选项很有用：

rowReorder: {
    update: false
},

显然，“更新”选项可能会导致某些表出现一些不良行为。对于我的简单表格，我注意到除非我将其设置为 false，否则无论拖动多远，我都只能将行上下移动一行。将其设置为 false 可修复该问题而不会导致任何问题。

Answer 1

考虑以下内容。

$(function() {
  function moveColumn(table, sourceIndex, targetIndex) {
    console.log("Move Col " + sourceIndex + " to " + targetIndex);
    var body = $("tbody", table);
    $("tr", body).each(function(i, row) {
      $("td", row).eq(sourceIndex).insertAfter($("td", row).eq(targetIndex - 1));
    });
  }

  $(".mytable > thead > tr").sortable({
    items: "> th.sortme",
    start: function(event, ui) {
      ui.item.data("source", ui.item.index());
    },
    update: function(event, ui) {
      moveColumn($(this).closest("table"), ui.item.data("source"), ui.item.index());
      $(".mytable > tbody").sortable("refresh");
    }
  });

  $(".mytable > tbody").sortable({
    items: "> tr.sortme"
  });
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
<table class="mytable">
  <caption>My Table</caption>
  <thead>
    <tr>
      <td id="corner"></td>
      <th scope="col" class="sortme">Col I</th>
      <th scope="col" class="sortme">Col II</th>
      <th scope="col" class="sortme">Col III</th>
    </tr>
  </thead>
  <tbody>
    <tr class="sortme">
      <th scope="row">Row I</th>
      <td>Open</td>
      <td>Open</td>
      <td>Open</td>
    </tr>
    <tr class="sortme">
      <th scope="row">Row II</th>
      <td>Open</td>
      <td>Open</td>
      <td>Closed</td>
    </tr>
    <tr class="sortme">
      <th scope="row">Row III</th>
      <td>Open</td>
      <td>Open</td>
      <td>Closed</td>
    </tr>
  </tbody>
</table>

这是一个基本示例。有一些陷阱，比如列没有一个好的占位符，而行将有一个。