可拖动和可拖放的Jquery UI切换位置

Question

我正在学习Jquery Draggable和Droppable。我想创建可切换的内容。我有这个计划：

<div class="droppableContainer">
  
  <div class="draggableContent" id="Content1">
    Hi I am Content 1.
  </div>
  
</div>


<div class="droppableContainer">
  
  <div class="draggableContent" id="Content2">
    Hi I am Content 2.
  </div>
  
</div>

如果，我拖动我的Content1并将其放入另一个droppableContainer，我想用Content2切换它。因此，在我删除Content1之后，Content2移动到Content1 droppableContainer，如下所示。

<div class="droppableContainer">
  
  <div class="draggableContent" id="Content2">
    Hi I am Content 2.
  </div>
  
</div>


<div class="droppableContainer">
  
  <div class="draggableContent" id="Content1">
    Hi I am Content 1.
  </div>
  
</div>

有任何建议吗？感谢