Demo of Dragging elements containment to Parent in JQuery

HTML

<div class=drg_box1>
<div class=drg_box id=drg1>Drag Me</div>
</div>

jquery

<script>
$(document).ready(function() {
////////////////
$( ".drg_box" ).draggable({
containment: "parent"
});
//////
$( function() {
    $( "#my-sortable1" ).sortable();
    $( "#my-sortable1" ).disableSelection();
$( "#my-sortable2" ).sortable();
    $( "#my-sortable2" ).disableSelection();

  } );
//////////////////
//////
$("#b1").click(function(){
$( ".drg_box" ).draggable( "option", "connectToSortable", "#my-sortable1" );
var connectToSortable = $( ".drg_box" ).draggable( "option", "connectToSortable" );
$('#d1').html("connectToSortable value is " + connectToSortable);
})
///////////

//////
$("#b2").click(function(){
$( ".drg_box" ).draggable( "option", "connectToSortable", "#my-sortable2" );
var connectToSortable = $( ".drg_box" ).draggable( "option", "connectToSortable" );
$('#d1').html("connectToSortable value is " + connectToSortable);
})
///////////
})
</script>