I have a drop item that can be dragged between 2 drop targets like so

$(document).ready(function() {
   
$(drag_element).draggable({ revert: "invalid"});

    $( "#drop1" ).droppable({
        activeClass: 'blue',
        drop: function( event, ui ) {
          $( this )
          .find( "p" );
        }
      });

      $( "#drop2" ).droppable({
        activeClass: 'blue',
        drop: function( event, ui ) {
          $( this ).find( "p" );
        }
      });  
  } );

My html places the drag_element under drop1 zone to begin with.

However activeClass will highlight both of them. If I'm dragging from drop1 zone I want to highlight drop2 zone. What's a good way to fix this?