Drop element in specific element recognition

Question

Can I somehow recognise, that I dropped element into specific element?

I know this code well, but what if I need to do something after drop .card into class .drop1 and do something else after drop .card into class .drop2?

$( ".card" ).on( "dragstop", function( event, ui ) {
        document.body.style.backgroundColor = "red";
});

For example:

• after drop into .drop1 --> red color
• after drop into .drop2 --> blue color

Answer 1

I'm not 100% sure if this is what you're looking for but in the jQuery UI drop example has this set up. You can reference it here https://jqueryui.com/droppable/

  $( function() {
    $( "#draggable" ).draggable();
    $( "#droppable" ).droppable({
      drop: function( event, ui ) {
       $( this )
         .addClass( "ui-state-highlight" )
         .find( "p" )
        .html( "Dropped!" );
       }
    });
 } );

If you look at the example you should be able to follow it easily enough to modify it to your code to make it work.