Feedback on a drag drop

Question

I made a drag-n-drop with the jQuery, but I want that when the person fills in all appear a feedback, someone has some idea of how to do this, follow an example of my code

<img src="image.png" class="card01">
<img src="image.png" class="card02">
<div class="bloco01"></div>
<div class="bloco02"></div>
<div class-"feedback"></div>"

$( function() {
    $( ".card01" ).draggable({ revert: "invalid" });
    $( ".bloco01" ).droppable({
        accept: ".card01",
        drop: function( event, ui ) {
            $( this ).addClass("ui-state-highlight");
            $( ".card01" ).addClass('dropped');
        }
    });

    $( ".card02" ).draggable({ revert: "invalid" });
    $( ".bloco02" ).droppable({
        accept: ".card02",
        drop: function( event, ui ) {
            $( this ).addClass("ui-state-highlight");
            $( ".card02" ).addClass('dropped');
        }
    });
});

Answer 1

As you add a class to the cards, you only need to make a conditional to see if they have the classes. If the classes show the message to the user, otherwise the message is not shown. This way, whatever order the user drags the elements, it will only show the message if the two images are dragged:

$(function() {
  $(".card01").draggable({
    revert: "invalid"
  });
  $(".bloco01").droppable({
    accept: ".card01",
    drop: function() {
      $(this).addClass("ui-state-highlight");
      $(".card01").addClass("dropped");
      showMessage();
    }
  });

  $(".card02").draggable({
    revert: "invalid"
  });
  $(".bloco02").droppable({
    accept: ".card02",
    drop: function() {
      $(this).addClass("ui-state-highlight");
      $(".card02").addClass("dropped");
      showMessage()
    }
  });
  
  $(".card03").draggable({
    revert: "invalid"
  });
  $(".bloco03").droppable({
    accept: ".card03",
    drop: function() {
      $(this).addClass("ui-state-highlight");
      $(".card03").addClass("dropped");
      showMessage();
    }
  });
  
  $(".card04").draggable({
    revert: "invalid"
  });
  $(".bloco04").droppable({
    accept: ".card04",
    drop: function() {
      $(this).addClass("ui-state-highlight");
      $(".card04").addClass("dropped");
      showMessage();
    }
  });
  
});

function showMessage() {
    var card01 = $(".card01").hasClass("dropped");
    var card02 = $(".card02").hasClass("dropped");;
    var card03 = $(".card03").hasClass("dropped");;
    var card04 = $(".card04").hasClass("dropped");;
    
    if(card01 && card02 && card03 && card04) {
        $(".feedback").addClass("show");
    }
  }

.bloco01 {
  position: absolute;
  width: 25%;
  height: 50px;
  background-color: red;
  margin-bottom: 15px;
}

.bloco02, .bloco04 {
  position: relative;
  left: 50%;
  top: 0;
  width: 25%;
  height: 50px;
  margin-bottom: 15px;
}

.bloco02{
  background-color: yellow;
}

.bloco03{
  position: absolute;
  top: 46%;
  width: 25%;
  height: 50px;
  margin-bottom: 15px;
  background-color: green;
}

.bloco04{
  background-color: gray;
}

.card01, .card02, .card03, .card04 {
  z-index: 999;
}

.feedback {
  opacity: 0;
  display: inline-block;
  padding: 15px;
  background-color: green;
  color: #FFF;
}

.ui-state-highlight {
  border: solid 5px blue;
}

.dropped {
  border: solid 3px blue;
}

.show {
  opacity: 1;
  animation: showFeed 1s ease-in-out;
}

@keyframes showFeed {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<img src="image.png" class="card01">
<img src="image.png" class="card02">
<img src="image.png" class="card03">
<img src="image.png" class="card04">
<div class="bloco01"></div>
<div class="bloco02"></div>
<div class="bloco03"></div>
<div class="bloco04"></div>
<div class="feedback">Você preencheu todos!</div>

The Css was just to illustrate.