Highlight zone to be completed
<p>In my drag and drop game there is a grid that is populated with words that are hidden from the user. The aim of the game is to spell these words with the aid of a sound and a picture. The user spells a word by dragging and dropping the relevant letters onto the grid. </p>

<p>At the moment the user can drag and drop the letter anywhere in the highlighted zone (the word), and the script will slide it into position. This is all well and good but I want to highlight the actual spot within the word where the user should drop the letter.</p>

<p>At the moment the the highlighted word is called ".spellword" and it glows purple. I have created a class called ".spellLetter" that glows white which I want to indicate the space to drop in. Can anyone help?</p>

<p>Here is the script that applies the class to the grid...</p>

<pre><code>    $('.drag').draggable({
    helper: 'clone',
    snap: '.drop',
    grid: [62, 62],
    revert: 'invalid',
    snapMode: 'center',
    start: function() {
        var validDrop = $('.drop-box.spellword');
        validDrop.addClass('drop');
        makeDroppables();
        $(right).val('');
        $(wrong).val('');
    }

});
</code></pre>

<p>Fiddle to help - <a href="http://jsfiddle.net/smilburn/Dxxmh/57/" rel="nofollow">http://jsfiddle.net/smilburn/Dxxmh/57/</a></p>
