JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<div id=indulas>
  <img src="https://dummyimage.com/200x100/f00/c00.png&text=piros" data-szin=piros>
  <img src="https://dummyimage.com/200x100/0f0/0c0.png&text=zöld" data-szin=zold>
  <img src="https://dummyimage.com/200x100/00f/00c.png&text=kék" data-szin=kek>
</div>

<div id=erkezes>
  <span data-szin=piros>itt a piros</span>
  <span data-szin=zold>hol a piros</span>
  <span data-szin=kek>azt a piros</span>
</div>

<form action="#">
<input type=button value="Ellenőrzés">
</form>

CSS

div#indulas, div#erkezes {
  border-style: solid;
  padding: 10px;
  margin: 10px;
}

span {
  display: inline-block;
  width: 225px;
  height: 125px;
  background-color: silver;
}

JavaScript

let siker = {piros: false, zold: false, kek: false};

$('img').draggable({revert: 'invalid'});
$('div#indulas').droppable({drop: (event, ui) => siker[ui.helper.data('szin')] = false});
$('span').droppable({drop: (event, ui) => siker[ui.helper.data('szin')] = $(event.target).data('szin') == ui.helper.data('szin')});

$('input').on('click', event => alert(Object.values(siker).indexOf(false) === -1 ? 'Rendben' : 'Elégtelen'))