Create a path animation from one palce to another
===

My spelling game is currently drag and drop, but I want to change it so you click on the letters and it follows a path to the highlighted word in the grid.

Do I need to use co-ordinates or can I do it so it links to the highlighted area in the grid?

Here is the part of the script that deals with the drag and drop and the styles that show correct words, incorrect words and word to be spelt.

    $('#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');
    });



    $('.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);
            }
        }






    },

    activate: function(event, ui) {
        word = $(this).data('word');

        // try to remove the class
        $('td[data-word=' + word + ']').removeClass('wordglow').removeClass('wordglow4').removeClass('wordglow3');
    }


    });

How would I go about changing this? Thanks
    