Accepting the animation

Question

EDIT**

In my word game there is a grid with 3 letter words.

The aim of the game is to spell the words by clicking on the corresponding letters

Answer 1

Why not using a draggable/droppable element with an accept/revert setting, since you are using jQuery UI already?

Here is a theoretical way to accomplish an accept/revert drag & drop:

First you need to set your draggable to revert if it is not accepted:

$(".drag").draggable({ revert: 'invalid' });

Then of course you need to define what is valid in your droppable :

$(".drop").droppable({ accept: '.drag' });​

Either you try using a selector to filter the right answers, by setting a class for each letter (.addClass("b");) and later change dynamically this selector with .droppable("option","accept",".b"). Or use the magic powder included in jQuery UI. You can insert a function as a value for "accept", it's returned value will define what you accept as a valid element: $(".drop").droppable( { accept: function() { // add a conditon here to return true or false } });​

Edit

To do the same with your click event :

$('.drag').on('click', function(e)
{
    e.preventDefault();

    var target     = $('.drop-box.spellword:not(.occupied):first');
    var targetPos  = target.position();
    var currentPos = $(this).offset();
    var b = $(this);

    if(target.length)
    {
        // compare clicked letter with expected letter
        if(b.attr("data-letter") == target.attr("data-letter"))
        {
            b.remove().appendTo('table').css({
            'position' : 'absolute',
            'top' : currentPos.top,
            'left': currentPos.left
            });

            b.animate({
               top  : targetPos.top,
                left : targetPos.left
            }, 'slow', function() {
                b.remove().css({ top: 0, left: 0 }).appendTo(target);
                target.addClass('occupied');
            });
        }
    }
});

Answer 2

If I understand the question, you are looking for a way to check the validity of a word that is created by selecting letters, and then applying styles to the word.

Heres what I would do:

var dict = []; // Create an array with all of the possible words
var word = "";

function createWord(){ // Creates the variable word to be checked against array
  var addToWord = $(this).html(); // Sets the variable addTo Word to the letter selected
  word = word + addToWord; // Adds the selected letter to the current word
};

function checkWord(){
  var i = dict[].length; // Sets incrementor "i" to the length of the array
  while (i){  // While "i" is a positive value
    if (word == dict[i]){ // Checks if the word is equal to the word in that spot of the array
      // If it is, apply the correct styles
    }
    else{ // If it isn't, 
      // Do Nothing
    }
   i = i--; // Decrease i by one, and repeat until the whole array has been checked
  }
};

$('foo bar').click(function(){
  createWord();
  checkWord();
}

Good Luck! Hope this helps.

-Brian