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>