Jquery Drag and Drop validation

Question

I have most of the functionality working on a jQuery drag and drop quiz.

You can view it here: http://www.chaosdesign.com/production/ernst-young/2014/landingpage/

The user drags a word from the right and drop it in one of the gaps on the left.

My problem is i need some sort of validation that the correct word is dropped on the correct area.

I have added a unique class to each drag element (.wordX) and each drop element (.snapX)

I figured i could find the coordinates of the '.snap1' element using the jquery .offset method. Then have some sort of if statement saying only allow drop if the '.word1' .coordinates match. Otherwise revert back to the starting position.

But i have no idea how to right this.

Any help would be greatly appreciated!

Current JS

$(function() {
$( ".draggable" ).draggable({ snap: ".snapTarget", snapMode: "inner", snapTolerance:
20, revert: "invalid" });
$( ".wordBg" ).droppable({
hoverClass: "boxHover",
});
});

Current HTML structure

Dragable items:

<div class="draggable word1">objectivity</div>
<div class="draggable word2">consult</div>

Snap Targets:

<span class="wordBg word6 snapTarget snap1"></span>
<span class="wordBg word6 snapTarget snap2"></span>

Answer 1

This can certainly be improved but it shows how it works for the first sentence by using the accept option in the droppable element http://jsfiddle.net/pf34F/

$(".word6").droppable({
   accept: ".word6"
});

(described here: http://api.jqueryui.com/droppable/#option-accept)