jQuery在多个tbodies之间拖动(重新排序)表行

在这个问答内容中，我们需要实现在多个<tbody>标签之间拖动表行进行重新排序。这里我们使用jQuery插件jQuery UI的Sortable功能来实现这个需求。

首先，确保已经在项目中引入了jQuery和jQuery UI库。可以通过以下方式引入：

然后，可以使用以下代码实现在多个<tbody>标签之间拖动表行进行重新排序：

$(document).ready(function() {
  $("table tbody").sortable({
    connectWith: "tbody",
    items: "tr:not(:first-child)",
    placeholder: "ui-state-highlight",
    forcePlaceholderSize: true,
    helper: "clone",
    cursor: "move",
    opacity: 0.65,
    update: function(event, ui) {
      // 在这里可以添加自定义的处理逻辑，例如将新的排序结果保存到数据库
    }
  });

  $("table tbody").disableSelection();
});

这段代码将实现以下功能：

• 使用sortable()方法启用表格中<tbody>标签的拖动功能。
• connectWith选项设置为"tbody"，表示允许在不同的<tbody>之间拖动表行。
• items选项设置为"tr:not(:first-child)"，表示只允许拖动<tr>元素，但不包括每个<tbody>的第一个子元素（通常是表头行）。
• placeholder选项设置为"ui-state-highlight"，表示当拖动表行时，将显示一个高亮的占位符来指示拖动的位置。
• forcePlaceholderSize选项设置为true，表示强制占位符的大小与被拖动的表行相同。
• helper选项设置为"clone"，表示拖动时将创建一个克隆的表行，而不是移动原始表行。
• cursor选项设置为"move"，表示在拖动时显示一个移动的光标。
• opacity选项设置为0.65，表示拖动时表行的透明度。
• update事件回调函数在表行拖动并重新排序后触发，可以在这里添加自定义的处理逻辑，例如将新的排序结果保存到数据库。

最后，需要注意的是，这个解决方案不涉及任何云计算品牌商，因此无需避免提及。