Javascript 待完成的突出区域

在我的拖放游戏中，有一个网格，其中填充了对用户隐藏的单词。游戏的目的是借助声音和图片拼写这些单词。用户通过将相关字母拖放到网格上来拼写单词

此时，用户可以将字母拖放到突出显示区域（单词）的任何位置，脚本会将其滑动到位。这一切都很好，但我想强调的是，用户应该在单词中放置字母的实际位置

此时，突出显示的单词被称为“.spellword”，并发出紫色的光芒。我已经创建了一个名为“.spellLetter”的类，它会发出白色的光，我想指示要插入的空间。有人能帮忙吗

下面是将类应用于网格的脚本

    $('.drag').draggable({
    helper: 'clone',
    snap: '.drop',
    grid: [62, 62],
    revert: 'invalid',
    snapMode: 'center',
    start: function() {
        var validDrop = $('.drop-box.spellword');
        validDrop.addClass('drop');
        makeDroppables();
        $(right).val('');
        $(wrong).val('');
    }

});

---

小提琴帮助-

我已经编辑了你的小提琴。在版本中，当您开始拖动时，spellLetter类将应用于该字母的所有可能目标（具有相同数据字母属性的可拖放项）。我添加到拖动开始处理程序的语句是：

$('.spellword[data-letter="'+e.target.getAttribute("data-letter")+'"]').addClass('spellLetter')

i、 e查找所有元素，其中spellword类当前处于活动状态，且数据字母与当前拖动的元素相同，然后将spellLetter类添加到这些元素中

这是你要求的吗

---

编辑：这样当你不拖动时，目标高亮显示就会停止，这听起来像是我需要的，但似乎对我不起作用。你用的是什么浏览器@AsadFrefox。没有像不申请课程那样工作？请注意，直到几秒钟前，链接到的小提琴实际上还没有定义.spellLetter类。它只是应用于课堂；没有css规则。我刚刚编辑过。spellLetter的背景是白色的。你能试着在我的新小提琴上编辑一下吗。。。我有一些需要的改变@Asad你去。似乎在为我工作。但是，在正确的位置放置有问题，因为您的脚本只按顺序接受字母。对于“爸爸”，当我拖动d时，第一个和最后一个字母会被白色高亮显示。在我放置第一个d之后，如果我尝试放置另一个d，它会将其移动到第二个位置，这是错误的。它仍然不适用于您吗？我知道你不能用chrome，因为我刚试过，它会把一些东西弄得几乎像桌子一样。不过拼写字母的方法仍然有效。你在用什么？