使用JQuery ui拖放分区列和分区行

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>

<table>
  <thead>
    <tr>
      <th class="column">Column 1</th>
      <th class="column">Column 2</th>
      <th class="column">Column 3</th>
    </tr>
  </thead>
  <tbody>
    <tr class="row">
      <td>Cell 1</td>
      <td>Cell 2</td>
      <td>Cell 3</td>
    </tr>
    <tr class="row">
      <td>Cell 4</td>
      <td>Cell 5</td>
      <td>Cell 6</td>
    </tr>
  </tbody>
</table>

$(".column").draggable({
  helper: "clone",
  revert: "invalid"
});

$(".row").droppable({
  accept: ".column",
  drop: function(event, ui) {
    var droppedColumn = ui.helper.clone();
    $(this).append(droppedColumn);
  }
});