Javascript 使用jquery将2个div内容拖放到另一个div上合并

我需要以下场景的jquery代码。 有4个div，任何一个都可以拖放到另一个div上。 在删除DIV1和DIV2的内容时，应该合并

合并的内容也可以从原始div中取出并放回原始div 我的代码是这样的

<div id ="f1">
 <p id="c1">content 1</p>
</div>
<div id ="f2">
 <p id="c2">content 2</p>
</div>
<div id ="f3">
 <p id="c3">content 3</p>
</div>
<div id ="f4">
 <p id="c4">content 4</p>
</div>

内容1

内容2

内容3

内容4

如果我在f1上拖动f2，那么在f1中，我会发现c1和c2都是这样

<div id ="f1">  
 <p id="c1">content 1</p> 
 <p id="c2">content 2</p> 
</div>
<div id ="f3">
  <p id="c3">content 3</p>
</div>
<div id ="f4">
  <p id="c4">content 4</p>
</div>

内容1
内容2
内容3

内容4

现在我应该可以拔出c2，把它放在任何其他div上。像这样

<div id ="f1">  
 <p id="c1">content 1</p> 
</div>
<div id ="f3">
  <p id="c3">content 3</p>
</div>
<div id ="f4">
  <p id="c4">content 4</p>
  <p id="c2">content 2</p> 
</div>

内容1
内容3

内容4

内容2

---

请帮帮我。提前感谢。

我已经为此编写了一些代码。在浏览器控制台上，我可以看到标签被拖来拖去，但在用户界面上，效果并不十分明显

<script>
function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("Text", ev.target.id);
}

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("Text");
    $('#'+ev.target.id).parent().append($('#'+data));
}
</script>

<div id ="f1">
 <p id="c1" ondrop="drop(event)" ondragover="allowDrop(event)" draggable="true" ondragstart="drag(event)">content 1</p>
</div>
<div id ="f2">
 <p id="c2" ondrop="drop(event)" ondragover="allowDrop(event)" draggable="true" ondragstart="drag(event)">content 2</p>
</div>
<div id ="f3">
 <p id="c3" ondrop="drop(event)" ondragover="allowDrop(event)" draggable="true" ondragstart="drag(event)">content 3</p>
</div>
<div id ="f4">
 <p id="c4" ondrop="drop(event)" ondragover="allowDrop(event)" draggable="true" ondragstart="drag(event)">content 4</p>
</div>

功能allowDrop（ev）{
ev.preventDefault（）；
}
功能阻力（ev）{
ev.dataTransfer.setData（“文本”，ev.target.id）；
}
功能下降（ev）{
ev.preventDefault（）；
var data=ev.dataTransfer.getData（“文本”）；
$（'#'+ev.target.id）.parent（）.append（$（'#'+data））；
}
内容1

内容2

内容3

内容4

hi Nikhil，我不需要对它排序，我需要合并它。这不做任何排序。它实际上是在div标记内合并两个“p”标记。但从用户界面上看不是很清楚，所以你可以在Chrome中查看浏览器控制台。另外，如果在drop（）方法中删除.parent（），您将看到“content1 content2”出现在同一行中非常感谢，需要更多帮助，同时拖出可以销毁空div吗？此外，如果不存在div，则在删除时可以创建一个div吗？