如何在使用jquery拖拽回车时创建多个拖放区域？

<div id="dragArea">
  <div class="draggable">拖拽元素1</div>
  <div class="draggable">拖拽元素2</div>
  <div class="draggable">拖拽元素3</div>
</div>

<div class="dropArea">
  <h3>拖放区域1</h3>
</div>

<div class="dropArea">
  <h3>拖放区域2</h3>
</div>

$(function() {
  $(".draggable").draggable({
    revert: "invalid", // 拖拽元素在非有效目标上释放时返回原位置
    helper: "clone" // 拖拽时显示克隆元素
  });

  $(".dropArea").droppable({
    accept: ".draggable", // 只接受指定类名的拖拽元素
    drop: function(event, ui) {
      // 拖放完成时触发的回调函数
      $(this).append(ui.helper.clone()); // 将拖拽元素的克隆添加到拖放区域
    }
  });
});