jQuery checking if the correct an element has been "dropped"

Question

So I have got for example 10 different "draggable" boxes and 2 "droppable" areas, 5 boxes will go into droppable 1 and then the other 5 will go into droppable 2.

If box 1 tries to go into droppable 2 it shouldn't work.

It's almost like a quiz, need to match up the correct boxes(draggable) with the correct answers(droppable).

I am struggling to find a way to do it, I can get the elements draggable and be able to drag them to any box but how can I validate if it's the correct one? Could I put some sort of value on the element?

Here's a example of how far I have got so far.... The manin website is all done in PHP so i'll be using PHP to generate the "boxes" text.

jQuery

      $(function () {
      $("#draggable,#draggable2").draggable();
      $("#droppable").droppable({
          drop: function (event, ui) {
              $(this)
                .find("p"),
                alert();
          }
      });
  });

HTML

<div id="draggable" class="ui-widget-content">
<p>Drag me to my target</p>
</div>
<div id="draggable2" class="ui-widget-content">
<p>2</p>
</div>

<div id="droppable" class="ui-widget-header">
<p>Drop here</p>
</div>
<div id="droppable" class="ui-widget-header">
<p>Drop here</p>
</div>

Answer 1

You could add some custom attributes to the draggabl and droppable html elements, and when you drop the element, you check that the value on the draggable and on the droppable is the same

<div id="draggable" class="ui-widget-content" myValue="question1">
<p>Drag me to my target</p>
</div>

<div id="droppable" class="ui-widget-header" myValue="question1">
<p>Drop here</p>
</div>

Edit: added js (not tested)

$(function () {
  $("#draggable,#draggable2").draggable();
  $("#droppable").droppable({
      drop: function (event, ui) 
     {
             if($(this).attr("myValue") == ui.attr("myValue"))
             {
                  alert("OK");
             }
     }
  });
  });