Demo of setting and reading classes value for ui-droppable-active when draggable element is on move

Move the draggable element to see the classes applied, change the option below to add new class.

HTML

<div class='row'> <div class='col-md-6'> 
<div id="draggable" class="ui-widget-content">
  <p>Drag me to my destination</p>
</div>
</div><div class='col-md-2'>  
<div id="droppable" class="ui-widget-header" >
  <p>Dropp here</p>
</div>
</div></div>
Move the draggable element to see the classes applied, change the option below to add new class. <br><br>

<div id=d1></div>

<div class='radio-inline'>
  <label><input type='radio' name='r1' id='r1' value=' highlight' > highlight</label>
</div>

<div class='radio-inline'>
  <label><input type='radio' name='r1' id='r2' value='ui-state-highlight' checked>ui-state-highlight</label>
</div>

<div class='radio-inline'>
  <label><input type='radio' name='r1' id='r2' value='ui-state-error' >ui-state-error</label>
</div>
<div class='radio-inline'>
  <label><input type='radio' name='r1' id='r2' value='ui-state-error-text' >ui-state-error-text</label>
</div>
<div class='radio-inline'>
  <label><input type='radio' name='r1' id='r2' value='ui-state-disabled' >ui-state-disabled</label>
</div>
<div class='radio-inline'>
  <label><input type='radio' name='r1' id='r2' value='ui-state-active' >ui-state-active</label>
</div>
<div class='radio-inline'>
  <label><input type='radio' name='r1' id='r2' value='ui-priority-primary' >ui-priority-primary</label>
</div>
<div class='radio-inline'>
  <label><input type='radio' name='r1' id='r2' value='ui-state-disabled' >ui-priority-secondary</label>
</div>

jquery

<script>
$(document).ready(function() {
////////////////
$( function() {
    $( "#draggable" ).draggable({
   refreshPositions: true
 
});
});
///////////
$( "#droppable" ).droppable({
classes: {
    "ui-droppable": "highlight",
    "ui-droppable-active": "ui-state-highlight"
  },
  drop: function( event, ui ) {
        $( this )
        .find( "p" )
        .html( "Welcome Dropped!" );
  }
 });
///////////////
var class_used = $( "#droppable" ).droppable( "option", "classes.ui-droppable-active" );
$('#d1').html( " <b>Classes Used for : classes.ui-droppable-active </b> " + class_used );
///////////
$("input:radio[name=r1]").click(function() {
var sel=$(this).val()
$( "#droppable" ).droppable( "option", "classes.ui-droppable-active", sel );
var class_used = $( "#droppable" ).droppable( "option", "classes.ui-droppable-active" );
$('#d1').html( " <b>Classes Used for : classes.ui-droppable-active  </b>: " + class_used );
})
///////////////////////
})
</script>