Demo of appendTo option in Draggable element in JQuery

Drag me around

appendTo Box1 appendTo Box2

HTML

<p id="draggable" class='drg_box'>Drag me around</p>
<br><br><br><br><br><br><br>
<div class='row'><div class='col-md-4'>
<div id=d1 class='destination'>Box1</div> </div><div class='col-md-4'> <div id=d2 class='destination'>Box2</div>
</div></div><br>
<button  id=b1 class=my_button>appendTo Box1</button> <button  id=b2 class=my_button>appendTo Box2</button>

jquery

<script>
$(document).ready(function() {
////////////////
$( function() {
    $( "#draggable" ).draggable({
helper: "clone"
});
});
///////////
///////////
$("#b1").click(function(){
$( "#draggable" ).appendTo( "#d1" );
})
///////
///////////
$("#b2").click(function(){
$( "#draggable" ).appendTo( "#d2" );
})
///////////
})
</script>