Demo of setting option of accepting draggable element by droppable

CSS

<style>
.drg_box, drg_box2{ 
position: relative;
FONT-SIZE: 8px;
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: 8px;
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!" );
      }
    });
///////////////
$('#b1').click(function(){
$( "#droppable" ).droppable( "option", "accept", "#draggable2" );
$( "#droppable2" ).droppable( "option", "accept", "#draggable" );
//$("#b1").prop('value', 'CHANGED');
$("#b1").html('CHANGED');

var accept = $( "#droppable" ).droppable( "option", "accept" );
var accept2 = $( "#droppable2" ).droppable( "option", "accept" );
$('#d1').html("First box Accept " + accept + ", Second box accept " + accept2 );
})

/////////////
var accept = $( "#droppable" ).droppable( "option", "accept" );
var accept2 = $( "#droppable2" ).droppable( "option", "accept" );
$('#d1').html("First box Accept " + accept + ", Second box accept " + accept2 );

///////////
})
</script>