javascript - Merging 2 div content on drag and drop of div on one another using jquery -

javascript - Merging 2 div content on drag and drop of div on one another using jquery -

i need jquery code next scenario. there 4 div's, 1 can dragged , dropped on other. while dropping content of div1 , div2 should merged.

merged content can pulled out , set origial div code thing this.

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

if drag f2 on f1 in f1 should find both c1 , c2 this

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

now should able pull out c2 , set other div also. this..

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

please help me out. in advance.

i have managed write code this. on browser console see

tags getting dragged around on ui effect not crystal clear.

<script> function allowdrop(ev) { ev.preventdefault(); } function drag(ev) { ev.datatransfer.setdata("text", ev.target.id); } function drop(ev) { ev.preventdefault(); var info = 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>

javascript jquery drag