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

});

提琴帮助-http://jsfiddle.net/smilburn/Dxxmh/57/

最佳答案

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

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

也就是说，找到所有具有当前激活的拼写单词类且数据字母与当前拖动的元素相同的元素，然后将类spellLetter添加到它们中。

这是您所需要的吗？

编辑：Improved，以便当您不拖动时目标突出显示停止