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

Drag me to my destination

Dropp here

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>