Demo droppable element accepting draggable

CSS

<style>
.drg_box, drg_box2{ 
position: relative;
FONT-SIZE: 14px;
font-family: Verdana;
padding:5px;
width:100px;
height: 80px;
background-color: #ffff00;
border: 2px solid red;
border-radius: 5px;
z-index: 1;
}

.drg_box2 {
		background-color : #ff00ff;
}
.drop_box,drop_box2{ 
position: relative;
FONT-SIZE: 14px;
font-family: Verdana;
padding:5px;
width:120px;
height: 130px;
background-color: #f1f1f1;
border: 2px solid red;
border-radius: 5px;
z-index: -1;
}
.drop_box2 {
		background-color : #ff00ff;
}

</style>

HTML

<div class='row'> <div class='col-md-6'> 
<div id="draggable" class='drg_box'>
  <p>Drag me to my destination</p>
</div><br><br><br>
<div id="draggable2" class='drg_box drg_box2'>
  <p>Drag me to my destination</p>
</div>
</div><div class='col-md-2'>  
<div id="droppable" class='drop_box'>
  <p>Dropp here</p>
</div>
<br>
<div id="droppable2" class='drop_box drop_box2'>
  <p>Dropp here</p>
</div>
</div></div>

jquery

<script>
$(document).ready(function() {
////////////////
$( function() {
    $( "#draggable" ).draggable();
  });
  $( function() {
    $( "#draggable2" ).draggable();
  });
///////////
$( "#droppable" ).droppable({
	accept: "#draggable",
      drop: function( event, ui ) {
        $( this )
            .find( "p" )
            .html( "Dropped!" );
      }
    });
/////////////////////
$( "#droppable2" ).droppable({
	accept: "#draggable2",
      drop: function( event, ui ) {
        $( this )
            .find( "p" )
            .html( "Dropped!" );
      }
    });
///////////////
})
</script>