jQuery使用复选框拖放多个网格视图行

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>

<div id="grid-view">
  <div class="grid-row">
    <input type="checkbox" class="checkbox">
    <span>行1</span>
  </div>
  <div class="grid-row">
    <input type="checkbox" class="checkbox">
    <span>行2</span>
  </div>
  <!-- 更多行... -->
</div>

$(function() {
  $(".grid-row").draggable({
    helper: "clone",  // 拖拽时显示克隆元素
    revert: "invalid" // 拖拽结束时如果未放置到有效区域则返回原位置
  });

  $("#grid-view").droppable({
    accept: ".grid-row", // 只接受grid-row类的元素
    drop: function(event, ui) {
      // 获取拖拽的行元素
      var draggedRow = ui.draggable;
      
      // 克隆行元素并添加到放置区域
      draggedRow.clone().appendTo($(this));
    }
  });
});