drag and drop

drag and drop

Hello!

I have a problem obviously...
On my page there are three images and six icons. Images are droppable and icons are draggable. Images have ID names "nar", "bijela" and "zel". Icons have ID names "nar1", "nar2"..., "bijela1", "bijela2"...and so on.
When "bijela1" or "bijela2" is dropped on "bijela" image the correct icon will be shown...
I have some of the code here but I don't know how to check icons and images.
  1. <!doctype html>
  2. <html lang="hr">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="x-ua-compatible" content="ie=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  8. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
  9. <script type="text/javascript">
  10. $(function() {
  11.     $(".draggable").draggable();
  12. $(".droppable").droppable();
  13. $(".correct").hide();
  14. $(".wrong").hide();
  15.     });
  16. </script>
  17. </head>
  18. <center>
  19. <img src="image/box.png" height="48" width="48" class="draggable" id="bijele1"/>&nbsp;&nbsp;&nbsp;&nbsp;<img src="image/can.png" height="48" width="48" class="draggable" id="nar1"/>
  20. <img src="image/bottle.png" height="48" width="48" class="draggable" id="nar2"/>&nbsp;&nbsp;&nbsp;&nbsp;<img src="image/milk.png" height="48" width="48" class="draggable" id="nar3"/><br/>&nbsp;&nbsp;&nbsp;&nbsp;<br/>
  21. <img src="image/leaves.jpg" height="48" width="48" class="draggable" id="zel1"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="image/news.jpg" height="48" width="48" class="draggable" id="bijele2"/>
  22. <br/><br/><br/><br/>
  23. <img src="image/nar.png" height="184" width="145" class="droppable" id="nar"/>
  24. <img src="image/bijele.png" height="184" width="145" class="droppable" id="bijele"/>
  25. <img src="image/zel.png" height="184" width="145" class="droppable" id="zel"/><br/><br/>
  26. <img src="image/correct.png" height="48" width="48" class="correct"/><img src="image/wrong.png" height="48" width="48" class="wrong"/>
  27. </center>
  28. <script type="text/javascript">
  29. $("#nar").droppable ({
  30. drop: function() {
  31. }
  32. });
  33. </script>
  34. </html>
  35.