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

私はあなたのフィドルを編集しました。このバージョンでは、ドラッグを開始すると、その文字の可能なすべてのターゲット (同じ data-letter 属性を持つドロップ可能オブジェクト) に spellLetter クラスが適用されます。ドラッグ開始ハンドラーに追加したステートメントは次のとおりです。

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

つまり、spellword クラスが現在アクティブで、データ文字が現在ドラッグされている要素と同じであるすべての要素を検索し、それらにクラス spellLetter を追加します。

これはあなたが要求したものですか？

EDIT：ドラッグしていないときにターゲットの強調表示が停止するように改善

于 2012-10-10T09:22:53.827 に答える