使用jQuery在div的拖放上合並2個div內容

Question

我需要以下情況的jquery代碼。 有4個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>

如果我在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>

現在我應該能夠拉出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>

請幫幫我。 提前致謝。

Answer 1

我已經設法為此編寫了一些代碼。 在瀏覽器控制台上，我可以看到

標簽被拖拉，但在UI本身上效果卻不十分清晰。

<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>