2

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

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

目前突出显示的单词被称为“.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/

4

1 回答 1

1

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

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

即找到所有当前活动的spellword类的元素，并且数据字母与当前拖动的元素相同，并将类spellLetter添加到它们。

这是你要求的吗？

编辑：改进，以便在您不拖动时停止目标突出显示

于 2012-10-10T09:22:53.827 回答