Javascript 突出显示要填写的正确字母

在我的拖放游戏中，我目前有一个样式，可以向用户显示要拼写的单词，但它没有任何限制，可以确保用户除了第一个单词的第一个单元格之外，不会在任何其他地方放置字母

如何确保用户只能在单词的第一个字母中插入一个字母

或者有没有一种方法可以让投在投递区的任何字母向左滑动，以便它们按顺序放置

下面是将样式应用于要拼写的单词的代码

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

要应用的样式将是

     .spellLetter {

-webkit-box-shadow: inset 20px 0px 10px 5px #176BC9;
box-shadow: inset 0px 0px 10px 5px #176BC9;

 }

---

谢谢。

这里有一个更新的fiddle@m0onio

我认为最好的方法可能就是不在乎用户把信丢在哪里，而是把它放在他/她应该放的地方。所以，即使用户将字母作为单词中的最后一个扔掉，您也可以将它飞到正确的位置。@bwukelic我该怎么做？