创建从一个位置到另一个位置的路径动画

我目前正在创建一个拼写游戏，该游戏目前是拖放。游戏的目的是将字母拖到网格中相应的单词上。网格中拼写旁边的单词将高亮显示，以向用户显示字母的位置。

问题是，我现在想更改它，以便您单击字母，它们将自己动画化到指定的位置

我知道我必须使用JQuery路径动画才能做到这一点，但我需要使用坐标还是可以这样做，以便它链接到网格中高亮显示的区域？

这是脚本中处理拖放和显示正确单词、错误单词和要拼写的单词的样式的部分

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

});