title: Highlight correct letter to be completed
body: <p>In my drag and drop game I have currently got a style that shows the user what word to spell but it has no constraint to make sure that they don't drop a letter anywhere else but that first cell of the first word. </p>
  
  <p>How would I go making sure the user can only drop a letter in the first letter of the word?</p>
  
  <p>Or is there a way to make any letter dropped in the drop zone slide left so they are placed in order?</p>
  
  <p>Here is the code that applies the style to the word to spell...</p>
  
  <pre><code>$('#pickNext').click(function() {
  // remove the class from all td's
  $('td').removeClass('spellword');
  // pick a random word
  rndWord = shuffledWords.sort(function() {
      return 0.8 - Math.random();
  })[0];
  // apply class to all cells containing a letter from that word
  $('td[data-word="' + rndWord + '"]').addClass('spellword');
  });
  </code></pre>
  
  <p>Here is the script for my drag and drops...</p>
  
  <pre><code>$('.drag').draggable({
  
  helper: 'clone',
  snap: '.drop',
  grid: [60, 60],
  revert: function(droppable) {
      if (droppable === false) {
          return true;
      }
  
      else {
  
          return false;
      }
  }
  });
  
  
  $(".drop").droppable({
  drop: function(event, ui) {
      word = $(this).data('word');
  
      guesses[word].push($(ui.draggable).attr('data-letter'));
      console.log($(event));
      console.log($(ui.draggable).text());
  
      console.log('CHECKING : ' + $(this).text() + ' against ' + $(ui.draggable).text().trim());
  
  
      if ($(this).text() == $(ui.draggable).text().trim()) {
  
          $(this).addClass('wordglow3');
      } else {
          $(this).addClass('wordglow');
      }
      console.log('CHECKING : ' + $(this).text() + ' against ' + $(ui.draggable).text().trim());
  
  
      console.log(guesses);
  
      if (guesses[word].length == 3) {
          if (guesses[word].join('') == word) {
              $('td[data-word=' + word + ']').addClass('wordglow2');
  
          } else {
              $('td[data-word=' + word + ']').addClass("wordglow4");
              guesses[word].splice(0, guesses[word].length);
          }
      }
  },
  </code></pre>
  
  <p>The style to be applied will be...</p>
  
  <pre><code>     .spellLetter {
  
  -webkit-box-shadow: inset 20px 0px 10px 5px #176BC9;
  box-shadow: inset 0px 0px 10px 5px #176BC9;
  
   }
  </code></pre>
  
  <p>Thanks.</p>